FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix(aboutModal+modal): now trap focus in browser by jenny-s51 · Pull Request #2428 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

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

Merged
tlabaj merged 7 commits into
patternfly:masterfrom
jenny-s51:iss1389
Jul 10, 2019
ConversationCommits (7)ChecksFiles changed
Merged

fix(aboutModal+modal): now trap focus in browser#2428
tlabaj merged 7 commits into
patternfly:masterfrom
jenny-s51:iss1389

Conversation

jenny-s51 commented Jul 2, 2019 •
edited
Loading

Copy link
Copy Markdown
Contributor

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 requested review from boaz0 and jgiardino July 2, 2019 16:10
jenny-s51 mentioned this pull request Jul 2, 2019
Closed

patternfly-build commented Jul 3, 2019

Copy link
Copy Markdown
Collaborator

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

jgiardino commented Jul 3, 2019

Copy link
Copy Markdown
Contributor

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.

jgiardino previously approved these changes Jul 3, 2019
View reviewed changes

jgiardino 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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

The updates for AboutModal work as expected. Thanks!!

tlabaj commented Jul 3, 2019

Copy link
Copy Markdown
Contributor

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

boaz0 previously approved these changes Jul 4, 2019
View reviewed changes

boaz0 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

LGTM 👍

jenny-s51 dismissed stale reviews from boaz0 and jgiardino via 88faeba July 5, 2019 16:32
jenny-s51 requested a review from redallen July 5, 2019 17:35
redallen approved these changes Jul 5, 2019
View reviewed changes

redallen 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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Thanks Jenny!

jenny-s51 self-assigned this Jul 8, 2019
jenny-s51 requested review from boaz0 and jgiardino July 9, 2019 13:39
tlabaj approved these changes Jul 10, 2019
View reviewed changes

tlabaj 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.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

LGTM

tlabaj merged commit e9d7534 into patternfly:master Jul 10, 2019

patternfly-build commented Jul 10, 2019

Copy link
Copy Markdown
Collaborator

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 deleted the iss1389 branch July 17, 2019 18:37
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

dlabaj dlabaj approved these changes
jgiardino Awaiting requested review from jgiardino
boaz0 Awaiting requested review from boaz0
+2 more reviewers
tlabaj tlabaj approved these changes
redallen redallen approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

jenny-s51

Labels

A11y

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

Back | FazBrowse Home | New Git URL