feat(ExpandableSection): added aria labeling (#12071)

Co-authored-by: Eric Olkowski <git.eric@thatblindgeye.dev>

Author: thatblindgeye

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -56,6 +56,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * both are specified; used for uncontrolled expandable with dynamic toggle text).
    */
   toggleTextExpanded?: string;
+  /** Accessible name via human readable string for the expandable section toggle. */
+  toggleAriaLabel?: string;
+  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
+  toggleAriaLabelledBy?: string;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -109,6 +113,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     toggleText: '',
     toggleTextExpanded: '',
     toggleTextCollapsed: '',
+    toggleAriaLabel: undefined,
+    toggleAriaLabelledBy: undefined,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
     isDetached: false,
@@ -196,6 +202,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleTextExpanded,
       toggleTextCollapsed,
       toggleContent,
+      toggleAriaLabel,
+      toggleAriaLabelledBy,
       children,
       isExpanded,
       isDetached,
@@ -254,6 +262,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
               </span>
             )
           })}
+          aria-label={toggleAriaLabel}
+          aria-labelledby={toggleAriaLabelledBy}
         >
           {toggleContent || computedToggleText}
         </Button>

packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -30,6 +30,10 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   onToggle?: (isExpanded: boolean) => void;
   /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
   isDetached?: boolean;
+  /** Accessible name via human readable string for the expandable section toggle. */
+  toggleAriaLabel?: string;
+  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
+  toggleAriaLabelledBy?: string;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -42,6 +46,8 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   direction = 'down',
   hasTruncatedContent = false,
   isDetached,
+  toggleAriaLabel,
+  toggleAriaLabelledBy,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
@@ -74,6 +80,8 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
             </span>
           )
         })}
+        aria-label={toggleAriaLabel}
+        aria-labelledby={toggleAriaLabelledBy}
       >
         {children}
       </Button>

packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -191,3 +191,20 @@ test('Renders with class pf-m-detached when isDetached is true and direction is
 
   expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
 });
+
+test('Renders with aria-label when toggleAriaLabel is passed', () => {
+  render(<ExpandableSection toggleAriaLabel="Test label"></ExpandableSection>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
+  render(
+    <>
+      <div id="test-id">Test label</div>
+      <ExpandableSection toggleAriaLabelledBy="test-id"></ExpandableSection>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -30,3 +30,20 @@ test('Renders with class pf-m-detached when isDetached is true', () => {
 
   expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached');
 });
+
+test('Renders with aria-label when toggleAriaLabel is passed', () => {
+  render(<ExpandableSectionToggle toggleAriaLabel="Test label"></ExpandableSectionToggle>);
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});
+
+test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
+  render(
+    <>
+      <div id="test-id">Test label</div>
+      <ExpandableSectionToggle toggleAriaLabelledBy="test-id"></ExpandableSectionToggle>
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});