Skip to content

fix(react-card): infer a11y id from immediate header element #28266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcosmoura merged 7 commits into from
Jun 21, 2023
Merged

fix(react-card): infer a11y id from immediate header element #28266

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cab40cd
fix: infer a11y id from immediate header element
marcosmoura Jun 20, 2023
5da7598
fix: add missing changefiles
marcosmoura Jun 20, 2023
0d5c49a
fix: simplify code logic
marcosmoura Jun 21, 2023
ae9eeeb
fix: add more explicit conditionals
marcosmoura Jun 21, 2023
a436543
docs: add function usage documentation
marcosmoura Jun 21, 2023
e7b0b86
fix: rename var to be more descriptive
marcosmoura Jun 21, 2023
89107e2
fix: remove chain
marcosmoura Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-card-e65cb71c-d483-449c-b1cb-b6b23d07f25b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: infer a11y id from immediate header element",
"packageName": "@fluentui/react-card",
"email": "marcosvmmoura@gmail.com",
"dependentChangeType": "patch"
}
34 changes: 34 additions & 0 deletions packages/react-components/react-card/src/components/Card/Card.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,29 @@ const CardSample = (props: CardProps) => (
</>
);

const CardWithCustomHeader = ({
customHeaderId = 'custom-header-id',
...props
}: CardProps & { customHeaderId: string }) => (
<>
<p tabIndex={0} id="before">
Before
</p>

<Card id="card" {...props}>
<CardHeader
image={<img src={resolveAsset('powerpoint_logo.svg')} alt="Microsoft PowerPoint logo" />}
header={<b id={customHeaderId}>App Name</b>}
description={<span>Developer</span>}
/>
</Card>

<p tabIndex={0} id="after">
After
</p>
</>
);

const CardWithPreview = (props: CardProps) => (
<>
<p tabIndex={0} id="before">
Expand Down Expand Up @@ -423,6 +446,17 @@ describe('Card', () => {
});
});

it('should sync selectable aria-labelledby with card header immediate child', () => {
const customHeaderId = 'custom-header';

mountFluent(<CardWithCustomHeader customHeaderId={customHeaderId} selected />);

cy.get(`.${cardHeaderClassNames.header}`).should('not.have.attr', 'id');
cy.get(`.${cardClassNames.checkbox}`).then(slot => {
Comment thread
marcosmoura marked this conversation as resolved.
cy.get(`#${customHeaderId}`).then(() => expect(customHeaderId).equals(slot.attr('aria-labelledby')));
});
});

it('should sync selectable aria-label with card preview alt', () => {
mountFluent(<CardWithPreview selected />);

Expand Down
22 changes: 16 additions & 6 deletions packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,25 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
} = useCardContext_unstable();
const headerRef = React.useRef<HTMLDivElement>(null);

const hasChildId = React.useRef(false);
const generatedId = useId(cardHeaderClassNames.header, referenceId);

React.useEffect(() => {
if (header && headerRef.current) {
const { id } = headerRef.current;
const refId = !hasChildId.current && headerRef.current?.id;
Comment thread
marcosmoura marked this conversation as resolved.
Outdated
const childWithId = React.Children.toArray(header).find(element => {
if (!React.isValidElement(element)) {
return false;
}

setReferenceId(id ? id : generatedId);
}
}, [header, setReferenceId, generatedId]);
const { id } = element.props;
Comment thread
marcosmoura marked this conversation as resolved.
Outdated

return !!id;
Comment thread
marcosmoura marked this conversation as resolved.
Outdated
}) as React.ReactElement | undefined;

hasChildId.current = !!childWithId;

setReferenceId(refId ? refId : childWithId?.props.id ? childWithId?.props.id : generatedId);
}, [generatedId, header, setReferenceId]);

return {
components: {
Expand All @@ -49,7 +59,7 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
required: true,
defaultProps: {
ref: headerRef,
id: referenceId,
id: !hasChildId.current ? referenceId : undefined,
},
}),
description: resolveShorthand(description),
Expand Down