Feature ever 13205 a11y buttons and links #311
Merged
Conversation
This file contains 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
* feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com>
bkonuwa
approved these changes
May 3, 2021
|
Hrm, not sure why this PR shows @bkonuwa's modal changes - I already synced v3-alpha branch with master. Gonna wait an hour or so and see if Github picks up the updates to this PR - it should only contain 1 commit. |
pixelbandito
added a commit
that referenced
this pull request
May 17, 2021
* feat: Add Modal component (#309) * feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com> * feat: EVER-13212: a11y colors for buttons and text links Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
pixelbandito
added a commit
that referenced
this pull request
May 18, 2021
* feat: Add Modal component (#309) * feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com> * feat: EVER-13212: a11y colors for buttons and text links Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
pixelbandito
added a commit
that referenced
this pull request
May 21, 2021
* feat: Add Modal component (#309) * feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com> * feat: EVER-13212: a11y colors for buttons and text links Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
pixelbandito
added a commit
that referenced
this pull request
Aug 20, 2021
* feat: Add Modal component (#309) * feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com> * feat: EVER-13212: a11y colors for buttons and text links Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
pixelbandito
added a commit
that referenced
this pull request
Aug 24, 2021
* feat: Add Modal component (#309) * feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com> * feat: EVER-13212: a11y colors for buttons and text links Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
ManoloAlvarezForo
added a commit
that referenced
this pull request
Sep 16, 2021
* Feature ever 13205 a11y buttons and links (#311) * feat: Add Modal component (#309) * feat: Add Modal component * cleaned up css class names * add logic to auto focus and focus trapping in the modal * Add example of Modal usage * update unit test by adding snapshot to verify the component renders what is expected in the UI * fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages * fix: use userEvent.type to simulate escape key press * fixed failing test Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> Co-authored-by: Chris Garcia <pixelbandito@gmail.com> * feat: EVER-13212: a11y colors for buttons and text links Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com> * docs: Update changelog, publishing.md * Merge new features from v3.x to v4-alpha (#339) * Feature: EVER-13451: Add `Select` component (#325) * feat: EVER-13451: Initial commit of Select and Select.Option components * WIP: Keyboard handler for moving selected option focus with up arrow. * feat: EVER-13451: Up and down arrow keys, validity with hidden native select, break some code into separate hooks * feat: EVER-13451: Add tests for , make a child, export from index and import into example app * feat: EVER-13451: Update jsdom env to sixteen * feat: EVER-13451: Restore non-clicky style to plain Dropdown.Menu.Item content, style stories a bit * feat: EVER-13451: Update Dropdown.Menu.Item README * chore: EVER-13451: Update more tests and snapshots * v3.1.0 (#338) Just publishing a new minor version, no diff except the changelog and package.json version number. * Deploying v4.0.0-alpha.2 Co-authored-by: Chris Garcia <pixelbandito@gmail.com> Co-authored-by: bkonuwa <bkonuwa@gmail.com> Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Changes button, link, and most other colors that formerly used
#0092c2to use#007fa9, which passes color contrast checks when used on a white background (or as a background behind white text).This should make our primary buttons and link-style faux-buttons pass a11y contrast checks.
Refactoring
I also replaced some component references to the palette's
--rvr-bluevariable with the semantically-appropriate--rvr-color-primaryand--rvr-color-infovariables.Palette colors aren't ever intended for direct usage in components. Within components, everything should be mapped to a meaningful semantic color variable.
Exceptions
The one thing I overwrote was
input:focus's border and glow colors. Since the input focus state is transient and not related to text legibility, I mapped that to our--rvr-primary-hovercolor instead. The glow looked weird with the dark color.So focused inputs still look like this:
