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(a11y): fixing Selectable Tile HCM accessibility #6932

Merged

Conversation

rjhenriquez
Copy link
Contributor

Closes #6895

Fixing Selectable Tile focus state and icons indicating a selection in Hight Contrast Mode

Changelog

Changed

Selectable Tile component

Testing / Reviewing

On a Windows 10 machine, go to settings --> ease of access --> high contrast and flick the switch. Compare the storybook in Edge (Should be in High Contrast) to Chrome (Should look normal).
For Firefox, you'll need to open it up and type about:config into the address bar. Then, search for layout.css.prefers-contrast and set it to true.

  • Visit Tile Multiselect component
  • Verify that the icon shows when selecting a tile
  • Verify the focus state works on the tile

@rjhenriquez rjhenriquez requested a review from a team as a code owner September 29, 2020 17:05
@netlify
Copy link

netlify bot commented Sep 29, 2020

Deploy preview for carbon-elements ready!

Built with commit a1eda2a

https://deploy-preview-6932--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Sep 29, 2020

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit a1eda2a

https://deploy-preview-6932--carbon-components-react.netlify.app

@tw15egan
Copy link
Collaborator

Looks good!

Can we also fix the ExpandableTile chevron? Doesn't look like it is appearing

image

@rjhenriquez
Copy link
Contributor Author

@tw15egan Fixed :)

Copy link
Collaborator

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

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

Nice! 👍 ✅

@andreancardona
Copy link
Contributor

andreancardona commented Oct 1, 2020

FF looks good ✅
Chrome looks good ✅
@rjhenriquez I'm seeing some weird behavior when selecting the tile on Windows 10 - Edge
Screen Shot 2020-10-01 at 12 48 48 PM
Screen Shot 2020-10-01 at 12 48 57 PM

Copy link
Contributor

@andreancardona andreancardona left a comment

Choose a reason for hiding this comment

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

see screenshots above

@tw15egan
Copy link
Collaborator

tw15egan commented Oct 1, 2020

@andreancardona this is what I'm getting on my Win10 machine running Edge. Wondering if this is a parallels issue? cc @dakahn since I know he's running Windows

image

@andreancardona
Copy link
Contributor

what I'm getting on my Win10 machine runn
ahh it very well could be! I'll wait for a response from @dakahn

Copy link
Contributor

@dakahn dakahn left a comment

Choose a reason for hiding this comment

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

image
Looks good to me on latest edge, window 10

Copy link
Contributor

@andreancardona andreancardona left a comment

Choose a reason for hiding this comment

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

:)

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.

Selectable Tile is not accessible in Windows High Contrast Mode
4 participants