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

Checkbox Example: Restore focus styling, add accessibility features documentation, and implement current code guide practices #1802

Merged
merged 24 commits into from
Oct 17, 2021

Conversation

jongund
Copy link
Contributor

@jongund jongund commented Mar 4, 2021

I was looking at the checkbox example and I noticed that at some point the accessibility features related to visual focus styling had been removed. I have have updated the example and also added accessibility documentation on the visual focus and hover styling improvements for accessibility.

Preview Link

Changes:

  • Renamed example HTML file: checkbox.html (NOTE: the mixed checkbox example will use the checkbox-mixed.html file name).
  • Updated JS code to use current coding practices.
  • Changed from using event.keyCode to event.key in event handlers.
  • Restored visual focus styling features that were removed from the example.
  • Added documentation of accessibility features.

Review checklist

@jongund
Copy link
Contributor Author

jongund commented Mar 4, 2021

@nschonni
I do not understand the linting error I am getting now.
Something to do with "npm install dependencies", how do I fix this?

@nschonni
Copy link
Contributor

nschonni commented Mar 4, 2021

Looks like a random hiccup to me in the general install step. I'd suggest trying to restart the job if you have permission

@jongund jongund changed the title Updated checkbox example to restore visual keyboard focus styling feature Checkbox: Updated checkbox example to restore visual keyboard focus styling feature May 7, 2021
Copy link
Contributor

@charmarkk charmarkk 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 with Firefox/Chrome and NVDA/JAWS latest. HCM Black and White looks good!

Copy link
Member

@zcorpan zcorpan left a comment

Choose a reason for hiding this comment

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

Code review and test review done, looks good to me.

@zcorpan
Copy link
Member

zcorpan commented May 17, 2021

Rebased and resolved merge conflicts in examples/index.html by running npm run reference-tables

Copy link
Contributor

@mcking65 mcking65 left a comment

Choose a reason for hiding this comment

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

Editorial review complete. Good to ship. Thank you @jongund for this PR.

@mcking65 mcking65 added Code Quality Non-functional code changes to satisfy APG code style guidelines and linters Example Page Related to a page containing an example implementation of a pattern QA for APG Examples Related to improve the quality and the acceptance of APG examples labels Oct 17, 2021
@mcking65 mcking65 added this to the 1.2 Release 1 milestone Oct 17, 2021
@mcking65 mcking65 changed the title Checkbox: Updated checkbox example to restore visual keyboard focus styling feature Checkbox Example: Restore focus styling, add accessibility features documentation, and implement code to conform with current code guide Oct 17, 2021
@mcking65 mcking65 changed the title Checkbox Example: Restore focus styling, add accessibility features documentation, and implement code to conform with current code guide Checkbox Example: Restore focus styling, add accessibility features documentation, and implement current code guide practices Oct 17, 2021
@mcking65 mcking65 merged commit 45e9a6c into main Oct 17, 2021
@zcorpan zcorpan deleted the update-checkbox branch October 29, 2021 20:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Code Quality Non-functional code changes to satisfy APG code style guidelines and linters Example Page Related to a page containing an example implementation of a pattern QA for APG Examples Related to improve the quality and the acceptance of APG examples
Development

Successfully merging this pull request may close these issues.

6 participants