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

fix accessibility violation by moving text to top of dialog on SelectPanel #3103

Merged
merged 9 commits into from
Sep 27, 2024

Conversation

owenniblock
Copy link
Contributor

@owenniblock owenniblock commented Sep 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 accessibility violation goes away if the content is presented at the top of the container element. Maybe it's not the best design wise so suggesting we make this change for now and then see if design want us to do some work to fix this in a different way.

Screenshots

Screenshots can be found here

Integration

No

List the issues that this change affects.

Closes https://github.com/github/primer/issues/3958
Closes https://github.com/github/primer/issues/4019

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.

Just a small layout tweak.

What approach did you choose and why?

This is the simplest way to fix the accessibility violation.

Anything you want to highlight for special attention from reviewers?

Accessibility

  • No new axe scan violation - This change does not introduce any new axe scan violations.

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.

@owenniblock owenniblock self-assigned this Sep 20, 2024
@owenniblock owenniblock requested a review from a team as a code owner September 20, 2024 15:17
Copy link

changeset-bot bot commented Sep 20, 2024

🦋 Changeset detected

Latest commit: 83b043c

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

Copy link
Contributor

github-actions bot commented Sep 20, 2024

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

@github-actions github-actions bot requested a review from a team as a code owner September 20, 2024 15:33
@owenniblock owenniblock requested review from camertron and mperrotti and removed request for keithamus and mperrotti September 20, 2024 15:55
Copy link
Member

@keithamus keithamus left a comment

Choose a reason for hiding this comment

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

This LGTM but @langermank or @lukasoppermann should also check this over.

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.

I'm ok with this too, but I wonder if a longer-term fix is to set a max height instead of a min.

Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

It looks a little off balanced to me, but without digging into the CSS I don't really have an alternative. Maybe it would look a little better with a little bit more padding on the top? But I don't think its worth blocking this.

@camertron
Copy link
Contributor

Yeah I agree with adding a bit more padding 👍

@camertron
Copy link
Contributor

camertron commented Sep 26, 2024

Looks like tests are failing under Rails main, I'll take a look.

EDIT: should be fixed by #3118

@owenniblock owenniblock merged commit 6033c86 into main Sep 27, 2024
34 checks passed
@owenniblock owenniblock deleted the move-loading-to-top branch September 27, 2024 16:19
@primer primer bot mentioned this pull request Sep 27, 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.

4 participants