fix: Don’t rely on 'id' which is possibly not globally-unique

primer · Jun 24, 2021 · 65a9b7f · 65a9b7f
1 parent f38b828
commit 65a9b7f
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -307,11 +307,12 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
     onKeyPress,
     children,
     onClick,
-    id: _id,
+    id,
     ...props
   } = itemProps
 
-  const id = useMemo(() => _id ?? uniqueId(), [_id])
+  const labelId = useMemo(() => uniqueId(), [])
+  const descriptionId = useMemo(() => uniqueId(), [])
 
   const keyPressHandler = useCallback(
     event => {
@@ -357,8 +358,8 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
       variant={variant}
       showDivider={showDivider}
       aria-selected={selected}
-      aria-labelledby={text ? `${id}-label` : undefined}
-      aria-describedby={description ? `${id}-description` : undefined}
+      aria-labelledby={text ? labelId : undefined}
+      aria-describedby={description ? descriptionId : undefined}
       {...props}
       data-id={id}
       onKeyPress={keyPressHandler}