difrensiert aria-label på saksbehandlingstider

PerOlavM · PerOlavM · commit 2cd6f32aa12a · 2024-07-02T12:54:19.000+02:00
diff --git a/src/components/_common/expandable/Expandable.tsx b/src/components/_common/expandable/Expandable.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ExpansionCard } from '@navikt/ds-react';
 import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { classNames } from 'utils/classnames';
 import { smoothScrollToTarget } from 'utils/scroll-to';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
+import {
+    ProcessingTimesVisibilityType,
+    ProductDetailType,
+} from 'types/content-props/product-details';
+import { usePageContentProps } from 'store/pageContext';
+import { translator } from 'translations';
 
 import style from './Expandable.module.scss';
 
@@ -14,7 +20,8 @@ type Props = {
     analyticsOriginTag?: string;
     className?: string;
     children: React.ReactNode;
-    expandableType?: 'processing_times' | 'payout_dates' | 'rates' | 'documentation_requirements';
+    expandableType?: ProductDetailType;
+    visibilityType?: ProcessingTimesVisibilityType;
 };
 
 export const Expandable = ({
@@ -24,10 +31,11 @@ export const Expandable = ({
     children,
     className,
     expandableType,
+    visibilityType,
 }: Props) => {
     const [isOpen, setIsOpen] = useState(false);
     const accordionRef = useRef<HTMLDivElement | null>(null);
-    const componentId = useId();
+    const { language } = usePageContentProps();
 
     useShortcuts({
         shortcut: Shortcuts.SEARCH,
@@ -71,16 +79,16 @@ export const Expandable = ({
     };
 
     const getHeaderIcon = () => {
-        if (expandableType === 'processing_times') {
+        if (expandableType === ProductDetailType.PROCESSING_TIMES) {
             return <BriefcaseClockIcon aria-hidden className={style.headerIcon} />;
         }
-        if (expandableType === 'payout_dates') {
+        if (expandableType === ProductDetailType.PAYOUT_DATES) {
             return <CalendarIcon aria-hidden className={style.headerIcon} />;
         }
-        if (expandableType === 'rates') {
+        if (expandableType === ProductDetailType.RATES) {
             return <BarChartIcon aria-hidden className={style.headerIcon} />;
         }
-        if (expandableType === 'documentation_requirements') {
+        if (expandableType === ProductDetailType.DOC_REQUIREMENTS) {
             return <TasklistIcon aria-hidden className={style.headerIcon} />;
         }
         return null;
@@ -105,6 +113,14 @@ export const Expandable = ({
     // This is the wrong use of this component, but some legacy pages have still to
     // be upradet editorial wise.
     const isLegacyUsage = !expandableType;
+    const getProductDetailsLabel = translator('productDetailTypes', language);
+    const getVisibilityLabel = translator('processingTimesVisibilityTypes', language);
+    const label =
+        expandableType === ProductDetailType.PROCESSING_TIMES &&
+        visibilityType &&
+        `${getProductDetailsLabel(ProductDetailType.PROCESSING_TIMES)} ${getVisibilityLabel(
+            visibilityType
+        )}`;
 
     return (
         <ExpansionCard
@@ -113,9 +129,9 @@ export const Expandable = ({
             ref={accordionRef}
             onToggle={toggleExpandCollapse}
             open={isOpen}
-            aria-labelledby={componentId}
+            aria-label={label || title}
         >
-            <ExpansionCard.Header className={style.header} id={componentId}>
+            <ExpansionCard.Header className={style.header}>
                 {getHeaderIcon()}
                 <div className={style.headerTitle}>{title}</div>
             </ExpansionCard.Header>
diff --git a/src/components/_common/expandable/ExpandableComponentWrapper.tsx b/src/components/_common/expandable/ExpandableComponentWrapper.tsx
@@ -12,6 +12,7 @@ export const ExpandableComponentWrapper = ({
     expandableAnchorId,
     analyticsOriginTag = '',
     type,
+    visibilityType,
     children,
 }: Props) => {
     if (!expandable) {
@@ -24,6 +25,7 @@ export const ExpandableComponentWrapper = ({
             anchorId={expandableAnchorId}
             analyticsOriginTag={analyticsOriginTag}
             expandableType={type}
+            visibilityType={visibilityType}
         >
             {children}
         </Expandable>
diff --git a/src/components/layouts/product-details-layout/ProductDetailsLayout.tsx b/src/components/layouts/product-details-layout/ProductDetailsLayout.tsx
@@ -63,7 +63,10 @@ export const ProductDetailsLayout = ({ pageProps, layoutProps }: Props) => {
 
                 // The 'main_complaint' section in product details is only applicable
                 // for product detail types === 'processing_times'
-                if (name === 'main_complaint' && detailType !== 'processing_times') {
+                if (
+                    name === 'main_complaint' &&
+                    detailType !== ProductDetailType.PROCESSING_TIMES
+                ) {
                     return null;
                 }
 
diff --git a/src/components/parts/product-details/ProductDetailsPart.tsx b/src/components/parts/product-details/ProductDetailsPart.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { ComponentMapper } from 'components/ComponentMapper';
 import { ExpandableComponentWrapper } from 'components/_common/expandable/ExpandableComponentWrapper';
-import { ProductDetailType } from 'types/content-props/product-details';
+import {
+    ProcessingTimesVisibilityType,
+    ProductDetailType,
+} from 'types/content-props/product-details';
 import { FilteredContent } from 'components/_common/filtered-content/FilteredContent';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { Language, translator } from 'translations';
@@ -14,6 +17,7 @@ import style from './ProductDetailsPart.module.scss';
 
 export type PartConfigProductDetails = {
     detailType: ProductDetailType;
+    processingTimesVisibility: ProcessingTimesVisibilityType;
     // Note: these two fields are defined as a special case on the backend
     // and are not included in the Graphql schema
     components: ComponentProps[];
@@ -56,12 +60,18 @@ export const ProductDetailsPart = ({ config }: PartComponentProps<PartType.Produ
     };
 
     const expandableType = config.detailType as unknown as ExpandableMixin['type'];
+    const visibilityType =
+        config.processingTimesVisibility as unknown as ExpandableMixin['visibilityType'];
 
     return (
         <div className={style.productDetails}>
             <PageContextProvider content={pageContent}>
                 <FilteredContent {...config}>
-                    <ExpandableComponentWrapper type={expandableType} {...config}>
+                    <ExpandableComponentWrapper
+                        type={expandableType}
+                        visibilityType={visibilityType}
+                        {...config}
+                    >
                         {components.map((component, index) => (
                             <ComponentMapper
                                 key={index}
diff --git a/src/translations/default.ts b/src/translations/default.ts
@@ -7,7 +7,10 @@ import {
     ToolsPageTaxonomy,
 } from 'types/taxonomies';
 import { Area } from 'types/areas';
-import { ProductDetailType } from 'types/content-props/product-details';
+import {
+    ProcessingTimesVisibilityType,
+    ProductDetailType,
+} from 'types/content-props/product-details';
 
 const relatedContent: { [key in MenuListItemKey]: string } = {
     [MenuListItemKey.AppealRights]: 'Klagerettigheter',
@@ -69,6 +72,13 @@ const productDetailTypes: { [key in ProductDetailType]: string } = {
     [ProductDetailType.PROCESSING_TIMES]: 'saksbehandlingstider',
     [ProductDetailType.RATES]: 'satser',
     [ProductDetailType.ALL_PRODUCTS]: 'alle',
+    [ProductDetailType.DOC_REQUIREMENTS]: 'krav til dokumentasjon',
+};
+
+const processingTimesVisibilityTypes: { [key in ProcessingTimesVisibilityType]: string } = {
+    [ProcessingTimesVisibilityType.ALL]: '',
+    [ProcessingTimesVisibilityType.APPLICATION]: 'søknad',
+    [ProcessingTimesVisibilityType.COMPLAINT]: 'klage',
 };
 
 export const translationsBundleNb = {
@@ -169,7 +179,7 @@ export const translationsBundleNb = {
         STOTTEKONTAKT: 'Støttekontakt',
         TILRETTELAGT_TRANSPORT: 'Tilrettelagt transport (TT-kort)',
     },
-    relatedContent: relatedContent,
+    relatedContent,
     taxonomies,
     areas,
     products: {
@@ -328,6 +338,7 @@ export const translationsBundleNb = {
         },
     },
     productDetailTypes,
+    processingTimesVisibilityTypes,
     payoutDates: {
         tableHeaderPrefix: 'Utbetalingsdatoer i',
         tableHeaderPrefixNoYear: 'Utbetalingsdatoer',
diff --git a/src/translations/en.ts b/src/translations/en.ts
@@ -6,6 +6,10 @@ import {
     ToolsPageTaxonomy,
 } from 'types/taxonomies';
 import { Area } from 'types/areas';
+import {
+    ProcessingTimesVisibilityType,
+    ProductDetailType,
+} from 'types/content-props/product-details';
 import { PartialTranslations } from './default';
 
 const taxonomies: {
@@ -300,6 +304,18 @@ export const translationsBundleEn: PartialTranslations = {
             months: 'months',
         },
     },
+    productDetailTypes: {
+        [ProductDetailType.PAYOUT_DATES]: 'payment dates',
+        [ProductDetailType.PROCESSING_TIMES]: 'processing times',
+        [ProductDetailType.RATES]: 'rates',
+        [ProductDetailType.ALL_PRODUCTS]: 'all',
+        [ProductDetailType.DOC_REQUIREMENTS]: 'documentation requirements',
+    },
+    processingTimesVisibilityTypes: {
+        [ProcessingTimesVisibilityType.ALL]: '',
+        [ProcessingTimesVisibilityType.APPLICATION]: 'application',
+        [ProcessingTimesVisibilityType.COMPLAINT]: 'complaints',
+    },
     payoutDates: {
         tableHeaderPrefix: 'Payment dates in',
         tableHeaderPrefixNoYear: 'Payment dates',
diff --git a/src/types/component-props/_mixins.ts b/src/types/component-props/_mixins.ts
@@ -5,6 +5,10 @@ import { Taxonomy } from 'types/taxonomies';
 import { AuthStateType } from 'store/slices/authState';
 import { EmptyObject, OptionSetMulti, OptionSetSingle } from 'types/util-types';
 import { Area } from 'types/areas';
+import {
+    ProcessingTimesVisibilityType,
+    ProductDetailType,
+} from 'types/content-props/product-details';
 
 export type HeaderWithAnchorMixin = {
     title: string;
@@ -127,7 +131,8 @@ export type ExpandableMixin = {
     expandableTitle: string;
     expandableAnchorId?: string;
     analyticsOriginTag?: string;
-    type?: 'processing_times' | 'payout_dates' | 'rates' | 'documentation_requirements';
+    type?: ProductDetailType;
+    visibilityType?: ProcessingTimesVisibilityType;
 };
 
 export type FiltersMixin = {
diff --git a/src/types/content-props/product-details.ts b/src/types/content-props/product-details.ts
@@ -3,4 +3,11 @@ export enum ProductDetailType {
     PAYOUT_DATES = 'payout_dates',
     PROCESSING_TIMES = 'processing_times',
     ALL_PRODUCTS = 'all_products',
+    DOC_REQUIREMENTS = 'documentation_requirements',
+}
+
+export enum ProcessingTimesVisibilityType {
+    ALL = 'all',
+    APPLICATION = 'application',
+    COMPLAINT = 'complaint',
 }
