Add switch example using HTML checkbox input

[jongund]

Preview link

• Editorial review by @mcking65
• Functional review by @carmacleod
• Visual design review by @a11ydoer
• Accessibility review on Windows/Mac OS by APG members on Aug 3.
• Code review by @jesdaigle / @zcorpan
• Test review by @jesdaigle / @zcorpan

---

Preview | Diff

[jongund]

@mcking65 @jnurthen
If you are using an input[type=checkbox] with the switch role, do you need to use aria-checked?
The W3C validator is requiring aria-checked.

[jnurthen]

https://www.w3.org/TR/html-aria/#el-input-checkbox states NOTE
The HTML checked attribute can be used instead of the aria-checked attribute for menuitemcheckbox, option or switch roles when used on type=checkbox.

The validator is wrong

See validator/validator#1122

[jongund]

@jnurthen
Thank you for the quick response, does this issue have any implication for the ARIA spec requiring the use of aria-checked for switch?

[jnurthen]

No - see the note at https://w3c.github.io/aria/#requiredState

[jongund]

@mcking65
For some reason this branch is failing the menu-button link test for the ENTER key, even though none of the menu button example files were touched in this pull request.

[shirsha]

I would suggest not to use CSS generated content as it is not supported screen readers on older versions, it is difficult to localize, difficult to change style by the user.

Suggest to have _for_ attribute for to match with _id_ attributes for input field even though we are implicit labelling method to increase the screenreader support.

[carmacleod]

Functional review:

Chrome, Firefox, and Safari:

• If I double-click or triple-click the switch, then the label text gets selected, which looks a bit funny. I think maybe the label needs to have CSS user-select: none; so that this won't happen. https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Safari:

• If I click and hold the switch, the label text turns white. (Safari only)

[shirsha]

If you use user-select: none; then VO/safari ignores the control.
https://bugs.webkit.org/show_bug.cgi?id=82692

[jongund]

@mcking65
Made updates to:

1. Move on/off labels from CSS to content, may need aria-hidden.
2. Added no selection, so text is selected when activating with a mouse.

[zcorpan]

Code review: 1 comment, otherwise LGTM
Test review: LGTM

[mcking65]

@zcorpan, @howard-e, this has changed a fair amount since last review of code and test. Could one of you please have another look?

CC @richnoah

[zcorpan]

Run regression tests CI check failed for menubar_menubar-navigation, though that test was not changed in this PR. Maybe the test is flaky. I'll try rerunning.

Edit: now it's green.

Log output

menubar_menubar-navigation › after.always hook
not ok 84 - StaleElementReferenceError: The element reference of <a href="#academics"> is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed
  ---
    remoteStacktrace: >
      WebDriverError@chrome://remote/content/shared/webdriver/Errors.jsm:181:5

      StaleElementReferenceError@chrome://remote/content/shared/webdriver/Errors.jsm:442:5

      element.resolveElement@chrome://remote/content/marionette/element.js:686:11

      evaluate.fromJSON@chrome://remote/content/marionette/evaluate.js:253:26

      evaluate.fromJSON@chrome://remote/content/marionette/evaluate.js:261:29

      receiveMessage@chrome://remote/content/marionette/actors/MarionetteCommandsChild.jsm:79:29
    name: StaleElementReferenceError
    message: >-
      The element reference of <a href="#academics"> is stale; either the element is
      no longer attached to the DOM, it is not in the current frame context, or the
      document has been refreshed
    at: >-
      Object.throwDecodedError (node_modules/selenium-webdriver/lib/error.js:517:15)

      parseHttpResponse (node_modules/selenium-webdriver/lib/http.js:671:13)

      Executor.execute (node_modules/selenium-webdriver/lib/http.js:597:28)

      thenableWebDriverProxy.execute
      (node_modules/selenium-webdriver/lib/webdriver.js:729:17)
  ...

[zcorpan]

This doesn't follow https://github.com/w3c/aria-practices/wiki/Code-Guide#prefixed-properties

Should we remove that section of the code guide?

[mcking65]

@zcorpan based on our Nov 2 discussion,I think we still need this for webkit. I think @jongund is looking into whether the others can be removed from this example without issue. Do we need a separate issue for conversation about what to do for prefix guidance in the code guide?

[zcorpan]

We can track it in #2110

[zcorpan]

Test review: LGTM

[mcking65]

@jongund, If I recall correctly, you were going to look into removeing browser prefixes from the css if possible? I think we found out it is necessary for webkit but may not the others? Not sure if I am remembering this correctly.

[jongund]

@mcking65 Updated CSS to remove -moz-user-select and -ms-user-select properties.

[mcking65]

@zcorpan
I think we have resolved all your feedback.
If you agree, pls change your to approve status.

[zcorpan]

Code review: LGTM