[misc enhancement] Allow consumers to pass custom aria-describedby …

…IDs to flyouts
elastic · Aug 10, 2023 · 0d7df8a · 0d7df8a
1 parent d84f0c6
commit 0d7df8a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
@@ -71,6 +71,25 @@ describe('EuiFlyout', () => {
     ).toBeFalsy();
   });
 
+  it('allows setting custom aria-describedby attributes', () => {
+    const { getByTestSubject } = render(
+      <>
+        <EuiFlyout
+          onClose={() => {}}
+          aria-describedby="custom-test-id"
+          data-test-subj="flyout"
+        />
+        <div id="custom-test-id" hidden>
+          This flyout does X, Y, and Z
+        </div>
+      </>
+    );
+    expect(getByTestSubject('flyout')).toHaveAttribute(
+      'aria-describedby',
+      'generated-id custom-test-id'
+    );
+  });
+
   describe('props', () => {
     test('hideCloseButton', () => {
       const component = mount(<EuiFlyout onClose={() => {}} hideCloseButton />);

diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
@@ -183,6 +183,7 @@ export const EuiFlyout = forwardRef(
       pushMinBreakpoint = 'l',
       focusTrapProps: _focusTrapProps = {},
       includeFixedHeadersInFocusTrap = true,
+      'aria-describedby': _ariaDescribedBy,
       ...rest
     }: EuiFlyoutProps<T>,
     ref:
@@ -349,6 +350,7 @@ export const EuiFlyout = forwardRef(
      */
     const hasOverlayMask = ownFocus && !isPushed;
     const descriptionId = useGeneratedHtmlId();
+    const ariaDescribedBy = classnames(descriptionId, _ariaDescribedBy);
 
     const screenReaderDescription = (
       <EuiScreenReaderOnly>
@@ -416,7 +418,7 @@ export const EuiFlyout = forwardRef(
           {...(rest as ComponentPropsWithRef<T>)}
           role={!isPushed ? 'dialog' : rest.role}
           tabIndex={!isPushed ? 0 : rest.tabIndex}
-          aria-describedby={!isPushed ? descriptionId : undefined}
+          aria-describedby={!isPushed ? ariaDescribedBy : _ariaDescribedBy}
           data-autofocus={!isPushed || undefined}
         >
           {!isPushed && screenReaderDescription}