Radio Group: Rating Example

[jongund]

I have created a new rating rating group example based on the discussion at the 6 April 2021 meeting.

Features:

• Uses SVG graphics elements
• Has high contrast support
• Code to use APG coding practices
• Uses role=none on SVG element
• Sets the CSS property forced-color-adjust to auto on the SVG element.
• Using stroke-opacity and fill-opacity instead of transparent values for setting stroke and fill colors for the SVG rect used for focus ring for high contrast mode.

Preview rating radio group example

Review checklist

• Editorial review by @mcking65
• Functional review by @shirsha
• Visual design review by @a11ydoer
• Accessibility review on iOS/iPadOS by @jongund
• Accessibility review by @a11ydoer
• Code review by @jesdaigle
• Test review by @jesdaigle

---

Preview | Diff

[jongund]

For iOS it works, but does not read the radiogroup label when navigating with forms.

[jesdaigle]

@jongund this PR has conflicts.

[jesdaigle]

@jongund there are some pending conflicts.

[jongund]

@jesdaigle
I think there is a problem with the commit process with examples/index.html, I don't touch examples/index.html, something in the commit process is changing it and it should be fixed. I tried checking the index.html file out from the main branch, but it still is changing it and causing a conflict. People working on examples, shouldn't need to worry about the examples/index.html page blocking their pull requests then they are not even touching it.

[a11ydoer]

@jongund Thanks for reflecting and implementing feedback from APG meeting.

[a11ydoer]

@shirsha would you mind finishing accessibilty review for this example?

[mcking65]

To highlight the interactive nature of the rating stars a focus ring appears around the star icon that has focus.

I don't understand the purpose of this sentence. It sounds like a focus ring appears on the item with focus. That goes without saying; it wouldn't be a special feature to provide a focus indicator.

When a pointer hovers over a star the cursor changes to a pointer and the number of filled stars is updated to include the hovered star. When a pointer leaves a star, the filled stars are restored to indicate the currently checked star.

This sounds like a potential problem because the user would not be able to distinguish between hover and selection. Someone using a mouse to drive magnification might think five stars are checked just because they look checked when the mouse puts their mag view over the fifth star. Do I understand this correctly?

[jongund]

This is the way other rating stars work that I have found, basically hover fills in stars as if they were the current state. Not sure if there is any other good way to distinguish between focus and hover state that does not get visually confusing and also works in high contrast mode. This is similar tot he issue Siri brought up related to hover and focus styling that recently came up for the disclosure menu example.

[jongund]

@mcking65 I have updated the description to talk about how changing hover and changing focus update the number of stars that are filled. So if focus is moving then the hover pointer is essentially being ignored. If hover is changing the number of stars filled changes based on the which star is being hovered. Selection of the radio is done through a click or a tap. If the hover moves off the stars it reverts to filling the stars based on the radio that is checked. I think this makes the most sense, but I am open to any other ideas people have.

[a11ydoer]

@mcking65 High contrast(white/dark theme) on PC and Mac with Firefox, Chrome works well.

[mcking65]

@a11ydoer
Do you think this is ready for me to merge then? There is still one windows accessibility review not checked off in the review list, but thinking you have done that now?

[a11ydoer]

@mcking65 I also checked rating example with voiceover and NVDA. The example works well.

[a11ydoer]

yes, @mcking65 I checked the example on windows too.