Skip to content
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

Jump to bottom

fix: stop screenreaders from reading duplicate accordion toggle btns #867

Merged
merged 2 commits into from
Aug 8, 2024
Merged

fix: stop screenreaders from reading duplicate accordion toggle btns #867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1579f0c
fix: prevent screen readers from accessing duplicate accordion toggle…
Aug 7, 2024
48a6059
fix: add missing describedBy prop implementation
Aug 7, 2024
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
11 changes: 8 additions & 3 deletions src/components/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
collapseAriaLabelText,
disabled,
expandAriaLabelText,
expandButtonDescribedBy,
expandButtonProps,
expanded,
expandIconProps,
Expand Down Expand Up @@ -89,23 +90,27 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
aria-controls={`${id}-content`}
aria-label={expanded ? expandAriaLabelText : collapseAriaLabelText}
aria-expanded={expanded}
aria-describedby={expandButtonDescribedBy || `${id}-header-content`}
className={styles.clickableArea}
onClick={onClick}
onKeyDown={handleKeyDown}
role="button"
tabIndex={0}
></div>
<div className={styles.accordionHeaderContainer}>
<div
id={`${id}-header-content`}
className={styles.accordionHeaderContainer}
jhoward-eightfold marked this conversation as resolved.
Show resolved Hide resolved
>
{iconProps && <Icon {...iconProps} />}
<div className={styles.accordionHeader}>
{typeof children === 'string' ? <span>{children}</span> : children}
</div>
{badgeProps && <Badge classNames={styles.badge} {...badgeProps} />}
</div>
<Button
role="presenation"
tabIndex={-1}
aria-controls={`${id}-content`}
ariaLabel={expanded ? expandAriaLabelText : collapseAriaLabelText}
aria-expanded={expanded}
disabled={disabled}
gradient={gradient}
iconProps={{ classNames: iconButtonClassNames, ...expandIconProps }}
Expand Down
9 changes: 9 additions & 0 deletions src/components/Accordion/Accordion.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,15 @@ interface AccordionBaseProps extends OcBaseProps<HTMLDivElement> {
* @default false
*/
expanded?: boolean;
/**
* Allows for setting (or unsetting if so desired) and alternative
* describedBy for the expand button. Otherwise it will default to the
* header content of the accordion. In cases where the header content
* is overly verbose and/or including buttons, it's recommended to
* set this to point to a more appropriate description or unset it so
* it the toggle button simple reads "According, button, expanded/collapsed."
*/
expandButtonDescribedBy?: string;
/**
* Expand button props
*/
Expand Down
42 changes: 28 additions & 14 deletions src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ exports[`Accordion Accordion is large 1`] = `
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="false"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -20,6 +21,7 @@ exports[`Accordion Accordion is large 1`] = `
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -53,9 +55,9 @@ exports[`Accordion Accordion is large 1`] = `
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="false"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -107,6 +109,7 @@ exports[`Accordion Accordion is medium 1`] = `
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="false"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -115,6 +118,7 @@ exports[`Accordion Accordion is medium 1`] = `
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -148,9 +152,9 @@ exports[`Accordion Accordion is medium 1`] = `
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="false"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -202,6 +206,7 @@ exports[`Accordion Accordion is not bordered 1`] = `
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="false"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -210,6 +215,7 @@ exports[`Accordion Accordion is not bordered 1`] = `
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -243,9 +249,9 @@ exports[`Accordion Accordion is not bordered 1`] = `
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="false"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -297,6 +303,7 @@ exports[`Accordion Accordion is pill shaped 1`] = `
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="false"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -305,6 +312,7 @@ exports[`Accordion Accordion is pill shaped 1`] = `
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -338,9 +346,9 @@ exports[`Accordion Accordion is pill shaped 1`] = `
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="false"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -392,6 +400,7 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="false"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -400,6 +409,7 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -433,9 +443,9 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="false"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -488,6 +498,7 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="true"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -496,6 +507,7 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -623,9 +635,9 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="true"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -677,6 +689,7 @@ exports[`Accordion Renders without crashing 1`] = `
>
<div
aria-controls="myAccordionId-content"
aria-describedby="myAccordionId-header-content"
aria-expanded="false"
aria-label="Accordion"
class="clickable-area"
Expand All @@ -685,6 +698,7 @@ exports[`Accordion Renders without crashing 1`] = `
/>
<div
class="accordion-header-container"
id="myAccordionId-header-content"
>
<span
aria-hidden="false"
Expand Down Expand Up @@ -718,9 +732,9 @@ exports[`Accordion Renders without crashing 1`] = `
<button
aria-controls="myAccordionId-content"
aria-disabled="false"
aria-expanded="false"
aria-label="Accordion"
class="button button-neutral button-medium round-shape icon-left"
role="presenation"
tabindex="-1"
>
<span
aria-hidden="false"
Expand Down
Loading