add ability to customize header's label

Telefonica · Nov 11, 2024 · 700f0df · 700f0df
1 parent d1d8916
commit 700f0df
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/src/__tests__/accordion-test.tsx b/src/__tests__/accordion-test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
 import {render, screen, waitFor} from '@testing-library/react';
-import {ThemeContextProvider, Text3, AccordionItem, Accordion} from '..';
+import {ThemeContextProvider, Text3, AccordionItem, Accordion, Text2} from '..';
 import {makeTheme} from './test-utils';
 
 const items = [
@@ -139,3 +139,28 @@ test('Accordion with singleOpen', async () => {
     });
     expect(screen.getByText('Content 3')).toBeInTheDocument();
 });
+
+test('Accordion with custom labels is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Accordion>
+                <AccordionItem
+                    title="Title 1"
+                    content={<Text3 regular>Content 1</Text3>}
+                    aria-label="Custom label 1"
+                />
+                <AccordionItem
+                    title="Title 2"
+                    content={<Text3 regular>Content 2</Text3>}
+                    aria-labelledby="item2-id"
+                />
+            </Accordion>
+            <Text2 regular id="item2-id">
+                Custom label 2
+            </Text2>
+        </ThemeContextProvider>
+    );
+
+    expect(screen.getByLabelText('Custom label 1')).toBeInTheDocument();
+    expect(screen.getByLabelText('Custom label 2')).toBeInTheDocument();
+});
diff --git a/src/accordion.tsx b/src/accordion.tsx
@@ -46,6 +46,8 @@ interface AccordionItemContentProps {
     role?: string;
     detail?: string;
     right?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 const useAccordionState = ({
@@ -122,7 +124,18 @@ const getAccordionItemIndex = (element: Element | null) => {
 };
 
 const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemContentProps>(
-    ({content, dataAttributes, trackingEvent, right, ...props}, ref) => {
+    (
+        {
+            content,
+            dataAttributes,
+            trackingEvent,
+            right,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            ...props
+        },
+        ref
+    ) => {
         const panelContainerRef = React.useRef<HTMLDivElement | null>(null);
         const itemRef = React.useRef<HTMLDivElement | null>(null);
         const {index, toggle} = useAccordionContext();
@@ -151,6 +164,8 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                     trackingEvent={trackingEvent}
                     aria-expanded={isOpen}
                     aria-controls={panelId}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledby}
                 >
                     <Box paddingX={16}>
                         <HeaderContent
@@ -282,7 +297,7 @@ interface BoxedAccordionItemProps extends AccordionItemContentProps {
 export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordionItemProps>(
     ({dataAttributes, isInverse, ...props}, ref) => (
         <Boxed
-            isInverse={isInverse}
+            variant={isInverse ? 'inverse' : 'default'}
             ref={ref}
             dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
         >