USWDS-Site - Fix JAWS accordion button readout #2557

amyleadem · 2024-03-25T18:14:58Z

Summary

Updated accordion button markup structure to match USWDS. This PR moved any header elements inside a usa-accordion__button out of the element and instead wrapped the buttons with the headers. This aligns the code structure with the accordion code in USWDS and fixed an issue with the readout of the accordion button in JAWS.
Created site-accordion-heading class. This allows us to reliably style code/preview accordion buttons.
Updated accordion accessibility tests pages. Changed the related "Passed with exceptions" tests to "Passed"

Important

We should update the changelog date before merge

Related issue

Closes #2368

Preview link

Problem statement

The audible announcement of the "expanded" and "collapsed" state of the accordions on the component pages says "to activate press enter". It Should say "Expanded" or "collapsed".

Here is a screen recording of the accordion in use on a component pages vs. the accordion example.

This issue is only evident in JAWS. It announces correctly in NVDA.

Solution

Updating the structure surrounding usa-accordion__button to match the structure in USWDS fixes the JAWS readout.

Changes made

Wrapped usa-accordion__button with the header element, rather than placing the header inside the button
Added usa-accordion__heading class for consistency with USWDS
Added site-accordion-heading to reliably add styles for the site's preview and code accordions WITHOUT affecting the component preview for accordion

Before/after

- <button class="usa-accordion__button" aria-controls="accordion-code" aria-expanded="false">
-   <h3 id="pattern-code">Pattern code</h3>
- </button>
+ <h3 id="pattern-code" class="usa-accordion__heading site-accordion-heading">
+    <button class="usa-accordion__button" aria-controls="accordion-code" aria-expanded="false">
+     Pattern code
+    </button>
+ </h3>

Testing and review

Accessibility checks

Confirm that JAWS, NVDA, and VoiceOver read out either "Expanded" or "Collapsed" for the accordion buttons, depending on state

Dev checks

Confirm that there are no visual or functional regressions on any "Component preview", "Component code", or "Pattern preview" accordion buttons
Confirm that the header and usa-accordion__button HTML structure matches the default USWDS component code
Confirm that accordion button code contains type="button
Confirm that there are no instances of header elements inside usa-accordion__button elements on the site
On the accordion component page, confirm that the accordion buttons inside the component preview are gray and not blue.
Confirm the copy in the changelog entry is accurate and free from error.
Confirm the accordion accessibility tests page renders as expected

- This aligns site code with default component code - This fixes a readout issue in JAWS

amyleadem · 2024-03-26T17:25:58Z

_data/accessibility-tests/accordion.yml

Note
The fix in this PR should remove the "Exception" from the status for these test items. Because of that, we can also remove the status_details and github issue details.

amyleadem · 2024-03-26T17:27:36Z

css/_uswds-theme-custom-styles.scss

Note
Updating the markup structure caused the original CSS to break. Created the site-accordion-heading as a more reliable method for styling these buttons.

alex-hull

3/25: confirmed with Amy L and Amy C that accordion in preview link read out "expanded" and "collapsed" when using the spacebar and enter key.

mahoneycm

Looking great! Just a few places that are missing the accordion heading classes and then we should be good to go 👍

Confirm that VoiceOver read out either "Expanded" or "Collapsed" for the accordion buttons, depending on state
Confirm that there are no visual or functional regressions on any "Component preview", "Component code", or "Pattern preview" accordion buttons
Confirm that the header and usa-accordion__button HTML structure matches the default USWDS component code
On the [accordion component page](https://federalist-ead78f8d-8948-417c-a957-c21ec5617a57.sites.pages.cloud.gov/preview/uswds/uswds-site/al-jaws-component-accordion/components/accordion/), confirm that the accordion buttons inside the component preview are gray and not blue.
Confirm that there are no instances of header elements inside usa-accordion__button elements on the site
Confirm the copy in the changelog entry is accurate and free from error.
Code changes are meaningful and free from error.
No perceived visual regressions throughout component pages.
- Address page missing accordion heading classes
- Gender identity and sex page missing accordion heading classes

pages/patterns/create-a-profile/address.md

pages/patterns/create-a-profile/gender-identity-and-sex.md

Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>

amyleadem · 2024-03-27T20:36:38Z

Thanks for catching those missing header classes, @mahoneycm. This is ready for your re-review.

…nent-accordion

pages/patterns/complex-form/establish-trust.md

pages/patterns/complex-form/keep-a-record.md

pages/patterns/create-a-profile/address.md

pages/patterns/create-a-profile/gender-identity-and-sex.md

pages/patterns/create-a-profile/phone-number.md

pages/patterns/complex-form/establish-trust.md

Co-authored-by: James Mejia <james.mejia@gsa.gov>

amyleadem · 2024-03-28T21:21:45Z

@mejiaj Thanks for flagging that this was missing the button type. The usa-accordion__button buttons should now all include type="button". This is ready for your re-review.

mahoneycm

Lgtm! Previous comment resolved

No perceived visual regressions throughout component pages.

- Fix formatting inconsistencies - Consistent links - Conssitent use of strong elements

mejiaj · 2024-03-29T19:07:04Z

pages/patterns/complex-form/establish-trust.md

Preview →

mejiaj · 2024-03-29T19:07:29Z

pages/patterns/complex-form/keep-a-record.md

Preview →

mejiaj · 2024-03-29T19:11:09Z

pages/patterns/create-a-profile/phone-number.md

Preview →

mejiaj · 2024-03-29T19:11:38Z

pages/patterns/create-a-profile/pronouns.md

Preview →

mejiaj · 2024-03-29T19:12:26Z

pages/patterns/create-a-profile/race-and-ethnicity.md

Preview →

mejiaj · 2024-03-29T19:12:46Z

pages/patterns/create-a-profile/social-security-number.md

Preview →

mejiaj · 2024-03-29T19:13:18Z

pages/patterns/select-language/language-preferences.md

Preview →

mejiaj · 2024-03-29T19:13:31Z

pages/patterns/select-language/selected-content.md

Preview →

mejiaj · 2024-03-29T19:13:42Z

pages/patterns/select-language/three-or-more-languages.md

Preview →

mejiaj · 2024-03-29T19:13:58Z

pages/patterns/select-language/two-languages.md

Preview →

annepetersen · 2024-03-29T19:14:01Z

Shouldn't these all have an updated "Latest updates," then? @mejiaj

mejiaj · 2024-03-29T19:14:28Z

pages/patterns/create-a-profile/name.md

Preview →

mejiaj · 2024-03-29T19:14:38Z

pages/patterns/create-a-profile/gender-identity-and-sex.md

Preview →

mejiaj · 2024-03-29T19:14:52Z

pages/patterns/create-a-profile/email-address.md

Preview →

mejiaj · 2024-03-29T19:15:03Z

pages/patterns/create-a-profile/date-of-birth.md

Preview →

mejiaj · 2024-03-29T19:15:16Z

pages/patterns/create-a-profile/contact-preferences.md

Preview →

mejiaj · 2024-03-29T19:15:35Z

pages/patterns/create-a-profile/address.md

Preview →

mejiaj · 2024-03-29T19:33:54Z

_data/changelogs/component-accordion-accessibility.yml

@@ -2,6 +2,12 @@ title: Accordion accessibility tests
 type: component
 changelogURL:
 items:
+  - date: NNNN-NN-NN


Suggested change

- date: NNNN-NN-NN

- date: 2024-03-29

mejiaj · 2024-03-29T20:47:11Z

@annepetersen the changes from html → markdown don't affect the output or display, so I'm inclined to leave them out of changelog.

We could note the change to the accordions though 🤔 — what do you think @amyleadem?

annepetersen · 2024-03-29T20:49:58Z

@mejiaj Ah, fair enough! I had this stuck in my memory as one where we had listed Known issues publicly (without looking). Nevermind then

amyleadem added 2 commits March 25, 2024 11:13

Wrap preview accordion button with h2

774f870

Wrap accordion_button with header element

26357cd

- This aligns site code with default component code - This fixes a readout issue in JAWS

amyleadem changed the title ~~USWDS-Site [Test] - Fix JAWS accordion button readout~~ USWDS-Site - Fix JAWS accordion button readout Mar 25, 2024

amyleadem added 2 commits March 25, 2024 16:05

Update "exceptions" on a11y tests page

fc47a64

Add site-accordion-heading to patterns accordions

f80065d

amyleadem commented Mar 26, 2024

View reviewed changes

amyleadem added 2 commits March 26, 2024 11:22

Format code

036b3d5

Add changelog for 2557

4765dc5

amyleadem marked this pull request as ready for review March 26, 2024 18:44

amyleadem requested review from mejiaj, mahoneycm, amycole501 and alex-hull March 26, 2024 18:56

alex-hull reviewed Mar 26, 2024

View reviewed changes

mahoneycm requested changes Mar 27, 2024

View reviewed changes

amyleadem and others added 2 commits March 27, 2024 12:54

Add missing accordion heading classes

6d7030d

Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>

Add missing accordion heading class

d476360

Co-authored-by: mahoneycm <charlie.mahoney@bixal.com>

amyleadem requested a review from mahoneycm March 27, 2024 20:36

Merge branch 'main' of github.com:uswds/uswds-site into al-jaws-compo…

e8ace4a

…nent-accordion

mejiaj requested changes Mar 28, 2024

View reviewed changes

mejiaj mentioned this pull request Mar 28, 2024

USWDS-Site - Patterns: Use accordion component #2578

Open

amyleadem and others added 2 commits March 28, 2024 13:59

Add type=button to accordion buttons

9992002

Co-authored-by: James Mejia <james.mejia@gsa.gov>

Add type="button" to accordion buttons

c1f0fb2

amyleadem requested a review from mejiaj March 28, 2024 21:19

mahoneycm approved these changes Mar 29, 2024

View reviewed changes

mejiaj added 2 commits March 29, 2024 10:59

Prefer markdown

3e16ebd

- Fix formatting inconsistencies - Consistent links - Conssitent use of strong elements

Consistent reference links

d46345d

mejiaj approved these changes Mar 29, 2024

View reviewed changes

mejiaj requested a review from annepetersen March 29, 2024 19:06