fix(DescriptionList): Ensure IDs are stable between renders

Royal-Navy · Mar 10, 2022 · 0c079b4 · 0c079b4
1 parent c7d61b8
commit 0c079b4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/react-component-library/src/components/DescriptionList/DescriptionList.test.tsx b/packages/react-component-library/src/components/DescriptionList/DescriptionList.test.tsx
@@ -117,10 +117,20 @@ describe('DescriptionList', () => {
     })
 
     describe('when the header is clicked', () => {
+      let initialSheetId: string
+
       beforeEach(() => {
+        initialSheetId = wrapper.getByTestId('description-list-sheet').id
         wrapper.getByTestId('description-list-header').click()
       })
 
+      it('does not generate a new sheet `id`', () => {
+        expect(wrapper.getByTestId('description-list-sheet')).toHaveAttribute(
+          'id',
+          initialSheetId
+        )
+      })
+
       it('should set `aria-expanded` on the button to `true`', () => {
         expect(wrapper.getByTestId('description-list-header')).toHaveAttribute(
           'aria-expanded',

diff --git a/packages/react-component-library/src/components/DescriptionList/DescriptionList.tsx b/packages/react-component-library/src/components/DescriptionList/DescriptionList.tsx
@@ -3,14 +3,15 @@ import { IconKeyboardArrowDown } from '@defencedigital/icon-library'
 
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { DescriptionListItem, DescriptionListItemProps } from '.'
-import { getId, warnIfOverwriting } from '../../helpers'
+import { warnIfOverwriting } from '../../helpers'
 import { useOpenClose } from '../../hooks'
 import { StyledAction } from './partials/StyledAction'
 import { StyledBadge } from './partials/StyledBadge'
 import { StyledDescriptionList } from './partials/StyledDescriptionList'
 import { StyledHeader } from './partials/StyledHeader'
 import { StyledSheet } from './partials/StyledSheet'
 import { StyledDescription } from './partials/StyledDescription'
+import { useExternalId } from '../../hooks/useExternalId'
 
 export interface DescriptionListProps extends ComponentWithClass {
   /**
@@ -29,8 +30,8 @@ export interface DescriptionListProps extends ComponentWithClass {
   description: string
 }
 
-function getAriaAttributes(isCollapsible: boolean, expanded: boolean) {
-  const sheetId = getId('sheet')
+function useAriaAttributes(isCollapsible: boolean, expanded: boolean) {
+  const sheetId = useExternalId('sheet')
 
   if (isCollapsible) {
     return {
@@ -50,7 +51,7 @@ export const DescriptionList: React.FC<DescriptionListProps> = ({
   ...rest
 }) => {
   const { open, toggle } = useOpenClose(false)
-  const ariaAttributes = getAriaAttributes(isCollapsible, open)
+  const ariaAttributes = useAriaAttributes(isCollapsible, open)
   const sheetId = ariaAttributes ? ariaAttributes['aria-owns'] : undefined
 
   return (