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.

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

Hide collapsed Accordion component content while JavaScript loads #434

Merged
merged 3 commits into from
Mar 20, 2024

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Mar 19, 2024

🛠 Summary of changes

This enhances accordion styles to appear hidden while JavaScript is loaded if expected to be collapsed once JavaScript finishes loading, avoiding the appearance of flashing content.

This backports changes added to the brochure site in GSA-TTS/identity-site#1224

It also incorporates a number of improvements:

  • Fixes an issue with Hide accordion content while JavaScript loads GSA-TTS/identity-site#1224 where it would not apply to sibling content of accordions where the button is wrapped inside a header container
  • Inverts the selector to look for :not([aria-expanded='true']) instead of [aria-expanded='false'] to support expected behavior where the aria-expanded attribute is not explicitly specified
  • Updates component examples for Accordion:
    • Document differences between "Default" and "Bordered" variant options
    • Remove an unnecessary and useless usa-accordion__container container element which is not standard to USWDS and would make the JavaScript hiding behavior ineffective
    • Remove unused and unnecessary data-test attribute
    • Encourage use of explicit aria-expanded="false"
  • Micro-optimizes src/js/init.ts to remove unnecessary curly braces on function body, syncing with upstream USWDS - Core: Shrink size of uswds-init.js uswds/uswds#5819

📜 Testing Plan

  1. npm start
  2. Visit http://localhost:4000/accordions/
  3. Hard refresh
  4. Observe no flashing content
  5. Observe documented examples for "Default" and "Bordered" appear without and with borders respectively

@aduth
Copy link
Contributor Author

aduth commented Mar 20, 2024

Visual regression failure expected for revised Accordion documentation.

image

@aduth aduth merged commit 16b3063 into main Mar 20, 2024
3 of 4 checks passed
@aduth aduth deleted the aduth-accordion-js-loading branch March 20, 2024 12:16
@aduth aduth mentioned this pull request Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants