diff --git a/src/__tests__/accordion-test.tsx b/src/__tests__/accordion-test.tsx
index 1abd8ba0e..753a1f0c8 100644
--- 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(
+
+
+ Content 1}
+ aria-label="Custom label 1"
+ />
+ Content 2}
+ aria-labelledby="item2-id"
+ />
+
+
+ Custom label 2
+
+
+ );
+
+ expect(screen.getByLabelText('Custom label 1')).toBeInTheDocument();
+ expect(screen.getByLabelText('Custom label 2')).toBeInTheDocument();
+});
diff --git a/src/accordion.tsx b/src/accordion.tsx
index eceb11f04..a2b4850e5 100644
--- 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(
- ({content, dataAttributes, trackingEvent, right, ...props}, ref) => {
+ (
+ {
+ content,
+ dataAttributes,
+ trackingEvent,
+ right,
+ 'aria-label': ariaLabel,
+ 'aria-labelledby': ariaLabelledby,
+ ...props
+ },
+ ref
+ ) => {
const panelContainerRef = React.useRef(null);
const itemRef = React.useRef(null);
const {index, toggle} = useAccordionContext();
@@ -151,6 +164,8 @@ const AccordionItemContent = React.forwardRef
(
({dataAttributes, isInverse, ...props}, ref) => (