Skip to content

Commit

Permalink
fix: Don’t rely on 'id' which is possibly not globally-unique
Browse files Browse the repository at this point in the history
  • Loading branch information
smockle committed Jun 24, 2021
1 parent f38b828 commit 254a4a3
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions src/ActionList/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -396,9 +397,9 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
)}
<StyledItemContent descriptionVariant={descriptionVariant}>
{children}
{text ? <TextContainer id={`${id}-label`}>{text}</TextContainer> : null}
{text ? <TextContainer id={labelId}>{text}</TextContainer> : null}
{description ? (
<DescriptionContainer id={`${id}-description`} descriptionVariant={descriptionVariant}>
<DescriptionContainer id={descriptionId} descriptionVariant={descriptionVariant}>
{descriptionVariant === 'block' ? (
description
) : (
Expand Down

0 comments on commit 254a4a3

Please sign in to comment.