Tri-State Checkbox Example: Restore Focus Appearance and Update Code Style

[jongund]

I was looking at the mixed 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-mixed.html.
• 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.
• Updated example to use SVG graphics

Review checklist

• Editorial review by @mcking65
• Visual design review by @charmarkk
• Accessibility review on Windows by @charmarkk
• Accessibility review on MacOS by @charmarkk
• Accessibility review on iOS/iPadOS by @jongund
• Code review by @jesdaigle
• Test review by @jesdaigle , @zcorpan

[jongund]

@nschonni
I having the same problem I have had with other pull requests, in that it is giving me an error for something in the examples\index.html file. I have not touched the file, so I am not sure why it is giving me an error.

The examples\index.html file is a generated file, what is it being checked for in my pull requests that could make it fail?

How does this get fixed?

[nschonni]

I think the lint-staged hook might not pick up the file rename. You can manually run npm run reference-tables to update the example file

[jongund]

@nschonni

That fixed it, thanks!

[jesdaigle]

Tests failed with 2 unhandled rejections in test/tests/menubar_menubar-navigation.js.

[jongund]

@jesdaigle

Tests failed with 2 unhandled rejections in test/tests/menubar_menubar-navigation.js.

I did not touch the navigation menubar code, so I am not sure why the navigation menubar example/tests would be affected by my changes. It looks to me all the regression test are passing now. Is there still an issue?

[zcorpan]

test/tests/menubar_menubar-navigation.js appears to be failing on main, and indeed this PR doesn't touch that test.

I've rebased this on main and resolved the conflict. Looks good to me.

[charmarkk]

Looks good with Firefox/Chrome and NVDA/JAWS latest. HCM Black and White look good, but with HCM Black and Chrome, it seems like the first checkbox (All Condiments) is not taking on the selected color in Windows settings - the bottom ones (Individual Condiments) do. So perhaps just one thing missing from the mixed checkbox. Not a blocker though, it's still white on black, and nothing is missing!

[mcking65]

@jongund, I corrected some of the obvious copy/paste issues in the accessibility features, e.g., changed mentions of radio to checkbox, but there is still some incorrect text.