fix(EbaySection): support unique ids on ebay-section (#367)

* chore: support unique ids * chore: use randomId to support react 16
eBay · Oct 7, 2024 · 9a406df · 9a406df
1 parent ed913fd
commit 9a406df
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/ebay-section-notice/__tests__/index.spec.tsx b/src/ebay-section-notice/__tests__/index.spec.tsx
@@ -92,4 +92,18 @@ describe('<EbaySectionNotice>', () => {
             expect(dismissMock).toHaveBeenCalled()
         })
     })
+
+    describe('id generation', () => {
+        test('should generate unique id for aria-labelledby and header', () => {
+            const wrapper = render(
+                <EbaySectionNotice status="information" aria-label="Important notice">
+                    <EbayNoticeContent>Test notice content</EbayNoticeContent>
+                </EbaySectionNotice>
+            );
+
+            const section = wrapper.getByRole('region');
+            const header = wrapper.container.querySelector('.section-notice__header');
+            expect(header).toHaveAttribute('id', section.getAttribute('aria-labelledby'));
+        });
+    })
 })
diff --git a/src/ebay-section-notice/section-notice.tsx b/src/ebay-section-notice/section-notice.tsx
@@ -5,13 +5,14 @@ import React, {
     KeyboardEventHandler,
     MouseEvent,
     MouseEventHandler,
-    ReactElement, useState
+    ReactElement, useEffect, useState
 } from 'react'
 import cx from 'classnames'
 import { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content'
 import NoticeContent from '../common/notice-utils/notice-content'
 import { EbayIcon, Icon } from '../ebay-icon'
 import { EbaySectionNoticeFooter } from './index'
+import { randomId } from '../common/random-id'
 
 export type SectionNoticeStatus = 'general' | 'none' | 'attention' | 'confirmation' | 'information' | 'education'
 export type Props = ComponentProps<'section'> & {
@@ -40,6 +41,13 @@ const EbaySectionNotice: FC<Props> = ({
     ...rest
 }) => {
     const [dismissed, setDismissed] = useState(false)
+
+    const [rId, setRandomId] = useState('')
+
+    useEffect(() => {
+        setRandomId(randomId())
+    }, [])
+
     const childrenArray = React.Children.toArray(children) as ReactElement[]
     const content = childrenArray.find(({ type }) => type === EbayNoticeContent)
     const hasStatus = status !== 'general' && status !== 'none'
@@ -73,10 +81,10 @@ const EbaySectionNotice: FC<Props> = ({
             })}
             role="region"
             aria-label={!hasStatus ? ariaLabel : null}
-            aria-labelledby={hasStatus ? `section-notice-${status}` : null}
+            aria-labelledby={hasStatus ? `section-notice-${status}-${rId}` : null}
             aria-roledescription={ariaRoleDescription}>
             {iconName && (
-                <div className="section-notice__header" id={`section-notice-${status}`}>
+                <div className="section-notice__header" id={`section-notice-${status}-${rId}`}>
                     <EbayIcon className={iconClass} name={iconName} a11yText={ariaLabel} a11yVariant="label" />
                 </div>
             )}