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.

Sign up for GitHub

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

Jump to bottom

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
Merged

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

merged 24 commits into from
Oct 17, 2021

Conversation

jongund
Copy link
Contributor

@jongund jongund commented Mar 4, 2021 •
edited by mcking65
Loading

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
charmarkk
charmarkk approved these changes May 17, 2021
View reviewed changes
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!

zcorpan
zcorpan approved these changes May 17, 2021
View reviewed changes
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 zcorpan force-pushed the update-checkbox branch from 76a6472 to 8bacc48 Compare May 17, 2021 23:05
@zcorpan
Copy link
Member

zcorpan commented May 17, 2021

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

mcking65
mcking65 approved these changes Oct 17, 2021
View reviewed changes
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
@zcorpan zcorpan mentioned this pull request Oct 29, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jesdaigle jesdaigle jesdaigle approved these changes

@charmarkk charmarkk charmarkk approved these changes

@mcking65 mcking65 mcking65 approved these changes

@zcorpan zcorpan zcorpan approved these changes

Assignees
No one assigned
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
Projects
Checkbox Patterns and Examples Development Project
Status: Complete
Milestone
1.2 Release 1
Development

Successfully merging this pull request may close these issues.
6 participants
@jongund @nschonni @zcorpan @mcking65 @charmarkk @jesdaigle