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

Docs: update accessibility section of PVC Banner #2620

Merged
merged 9 commits into from
Feb 21, 2024

Conversation

khiga8
Copy link
Contributor

@khiga8 khiga8 commented Feb 20, 2024

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

The Banner currently lacks accessibility guidance, and we've seen Banner come up in a few audit issues.

To help unblock existing audit issues and to prevent future audit issues, this PR provides accessibility guidance including:

  • Providing a heading and designating the Banner as a region landmark.
  • Announcing the Banner using a live region for feedback scenarios (in addition to the focus guidance that Lindsey already introduced).

List the issues that this change affects.

Fixes: https://github.com/github/accessibility/issues/5649

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.
    be resolved below.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

Copy link

changeset-bot bot commented Feb 20, 2024

🦋 Changeset detected

Latest commit: fc74138

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Comment on lines 22 to 26
# Focusing a Banner when it appear helps to maximize discoverability of the message, especially in critical scenarios.
#
# To properly focus a banner, add a `tabindex="-1"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).
#
# For more information about the focus management technique, visit the [Staff only: Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Focus content should not have changed, except I added a Staff only to the link!

@khiga8 khiga8 marked this pull request as ready for review February 20, 2024 15:29
@khiga8 khiga8 requested review from a team and jonrohan February 20, 2024 15:29
Copy link
Contributor

@lindseywild lindseywild left a comment

Choose a reason for hiding this comment

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

Looks good, yay!

app/components/primer/alpha/banner.rb Outdated Show resolved Hide resolved
Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Copy link
Contributor

@camertron camertron left a comment

Choose a reason for hiding this comment

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

Thanks for working on this!

app/components/primer/alpha/banner.rb Outdated Show resolved Hide resolved
app/components/primer/alpha/banner.rb Outdated Show resolved Hide resolved
app/components/primer/alpha/banner.rb Outdated Show resolved Hide resolved
khiga8 and others added 2 commits February 20, 2024 14:08
Co-authored-by: Cameron Dutro <camertron@gmail.com>
Co-authored-by: Cameron Dutro <camertron@gmail.com>
@khiga8
Copy link
Contributor Author

khiga8 commented Feb 20, 2024

Accepted your suggestions! Thanks for reviewing @camertron!

@camertron
Copy link
Contributor

Looks like we're seeing some breakage because of a change to Rails main. I'm going to merge this and address those failures in a follow-up PR.

@camertron camertron merged commit 59c3396 into main Feb 21, 2024
26 of 30 checks passed
@camertron camertron deleted the kh-update-banner-docs-with-more-a11y-guidance branch February 21, 2024 17:56
@primer primer bot mentioned this pull request Feb 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants