Skip to content

Modal: Fix modal aria-hidden for non-modal content after script load#4269

Merged
thisisdano merged 2 commits into
uswds:developfrom
aduth:aduth-non-modal-on-toggle
Jul 22, 2021
Merged

Modal: Fix modal aria-hidden for non-modal content after script load#4269
thisisdano merged 2 commits into
uswds:developfrom
aduth:aduth-non-modal-on-toggle

Conversation

@aduth

@aduth aduth commented Jul 16, 2021

Copy link
Copy Markdown
Contributor

Description

Accounts for cases where page content changes after initial script load, including:

  • If USWDS script is loaded early in page content, all server-rendered content to follow will not be counted as non-modal content (demo)
  • If any JavaScript alters the page after load, this will not be counted as non-modal content (demo)

Additional information

Because nonModals was assigned only once at script load, it would not include anything from the above scenarios.

Notably, this means that users navigating page content using assistive technology can often escape the modal, which is not the intended behavior.

The newly-added test cases will fail on the develop branch, because this issue is also present in the tests.


Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

aduth added 2 commits July 16, 2021 13:44
Account for cases where page content changes after initial script load, including:

- If USWDS script is loaded early in page content, all server-rendered content to follow will not be counted as non-modal content
- If any JavaScript alters the page after load, this will not be counted as non-modal content

@mejiaj mejiaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comment about the NON_MODALS selector. Otherwise LGTM, thanks for submitting this!

Comment thread src/js/components/modal.js
@thisisdano thisisdano merged commit f12a902 into uswds:develop Jul 22, 2021
@aduth aduth deleted the aduth-non-modal-on-toggle branch July 27, 2021 20:55
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.

3 participants