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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(aboutModal+modal): now trap focus in browser #2428

Merged
merged 7 commits into from Jul 10, 2019

Conversation

@jenny-s51
Copy link
Contributor

jenny-s51 commented Jul 2, 2019

What: AboutModal and Modal both now trap focus in the browser. However, screenreader accessibility is currently functioning only in modal, which was fixed @boaz0 's PR referenced below -- I added his change to this PR.

More feedback is necessary as to how to go about making screenreader accessibility work with AboutModal. Any assistance here would be appreciated. 馃檪

Additional issues: #2405 , #2406 , #1389

@jenny-s51 jenny-s51 requested review from boaz0 and jgiardino Jul 2, 2019
@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jul 3, 2019

PatternFly-React preview: https://patternfly-react-pr-2428.surge.sh

@jgiardino

This comment has been minimized.

Copy link
Collaborator

jgiardino commented Jul 3, 2019

Hey @jenny-s51 - these updates are great!

I tested keyboard accessibility using the following steps, and it worked as expected 馃帀

  1. Added a link with `href="#"1 to the contents of the modal. This is to provide another element that can receive focus besides the Close button.
  2. Opened the modal. Focus is placed on the Close button, as expected.
  3. Hit Tab. Focus is placed on the link, as expected.
  4. Hit Tab again. Focus is placed on the Close button, as expected.
  5. Repeated steps 3 & 4 with Shift + Tab to check that focus stays in the modal. Works as expected.
  6. Closed the modal, and focus is placed on the modal toggle, as expected.

There is an issue in the DOM that would affect screen reader accessibility. The following screencap shows aria-hidden="true" is applied to the div that includes the modal. This will hide the contents from assistive technologies, like screen readers. This was the same issue that was fixed for the Modal in #2406.

image

Copy link
Collaborator

jgiardino left a comment

The updates for AboutModal work as expected. Thanks!!

@tlabaj

This comment has been minimized.

Copy link
Contributor

tlabaj commented Jul 3, 2019

Looking good. In the future, it is better to separate PRs that touch different areas. Make for smaller code reviews and easier for tracking.

Copy link
Member

boaz0 left a comment

LGTM 馃憤

@jenny-s51 jenny-s51 dismissed stale reviews from boaz0 and jgiardino via 88faeba Jul 5, 2019
@jenny-s51 jenny-s51 requested a review from redallen Jul 5, 2019
Copy link
Contributor

redallen left a comment

Thanks Jenny!

@jenny-s51 jenny-s51 self-assigned this Jul 8, 2019
@jenny-s51 jenny-s51 requested review from jgiardino and boaz0 Jul 9, 2019
@dlabaj
dlabaj approved these changes Jul 10, 2019
@tlabaj
tlabaj approved these changes Jul 10, 2019
Copy link
Contributor

tlabaj left a comment

LGTM

@tlabaj tlabaj merged commit e9d7534 into patternfly:master Jul 10, 2019
8 checks passed
8 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: build_integration Your tests passed on CircleCI!
Details
ci/circleci: build_pf3_docs Your tests passed on CircleCI!
Details
ci/circleci: build_pf4_docs Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: test_jest_other Your tests passed on CircleCI!
Details
ci/circleci: test_jest_pf4 Your tests passed on CircleCI!
Details
ci/circleci: upload_docs Your tests passed on CircleCI!
Details
@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Jul 10, 2019

Your changes have been released in:

  • @patternfly/react-core@3.68.0
  • @patternfly/react-docs@4.8.71
  • @patternfly/react-inline-edit-extension@2.9.34
  • demo-app-ts@2.9.0
  • @patternfly/react-integration@2.9.0
  • @patternfly/react-table@2.14.8
  • @patternfly/react-topology@2.6.5
  • @patternfly/react-virtualized-extension@1.1.67

Thanks for your contribution! 馃帀

@jenny-s51 jenny-s51 deleted the jenny-s51:iss1389 branch Jul 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.