fix(accordion): add aria-label support to Accordion component buttons (#20514)

* fix(accordion): add aria-label support to Accordion component buttons

* fix(accordion): update snapshot test

Author: jeffchew

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -247,6 +247,9 @@ Map {
   },
   "AccordionItem" => {
     "propTypes": {
+      "aria-label": {
+        "type": "string",
+      },
       "children": {
         "type": "node",
       },

packages/react/src/components/Accordion/AccordionItem.tsx

@@ -39,6 +39,12 @@ export interface AccordionItemProps {
    */
   disabled?: boolean;
 
+  /**
+   * Specify a custom label for the accordion button.
+   * This is important for accessibility when the accordion has no visible title.
+   */
+  'aria-label'?: AriaAttributes['aria-label'];
+
   /**
    * The handler of the massaged `click` event.
    */
@@ -95,6 +101,7 @@ export interface AccordionItemProps {
 export interface AccordionToggleProps {
   'aria-controls'?: AriaAttributes['aria-controls'];
   'aria-expanded'?: AriaAttributes['aria-expanded'];
+  'aria-label'?: AriaAttributes['aria-label'];
   className?: string;
   disabled?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -116,6 +123,7 @@ function AccordionItem({
   title = 'title',
   disabled: controlledDisabled,
   handleAnimationEnd,
+  'aria-label': ariaLabel,
   ...rest
 }: PropsWithChildren<AccordionItemProps>) {
   const [isOpen, setIsOpen] = useState(open);
@@ -187,6 +195,7 @@ function AccordionItem({
         disabled={disabled}
         aria-controls={id}
         aria-expanded={isOpen}
+        aria-label={ariaLabel}
         className={`${prefix}--accordion__heading`}
         onClick={onClick}
         onKeyDown={onKeyDown}
@@ -224,6 +233,12 @@ AccordionItem.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify a custom label for the accordion button.
+   * This is important for accessibility when the accordion has no visible title.
+   */
+  'aria-label': PropTypes.string,
+
   /**
    * The handler of the massaged `click` event.
    */

packages/react/src/components/Accordion/__tests__/AccordionItem-test.js

@@ -85,6 +85,17 @@ describe('AccordionItem', () => {
 
       expect(screen.getByText('Test title')).toBeInTheDocument();
     });
+
+    it('should respect aria-label prop', () => {
+      render(
+        <AccordionItem title="Test title" aria-label="Custom accordion label" />
+      );
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-label',
+        'Custom accordion label'
+      );
+    });
   });
 
   describe('behaves as expected', () => {