[Bug][a11y]: mixed-value state of swatches must be conveyed to screen readers using ARIA

[dineshy87]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-swatch

Expected behavior

Currently, mixed state is not conveyed to screen reader users. Please use aria-checked="mixed" when mixed-value is used.

Please also note that mixed value is supported by only certain tri-state inputs such as a checkbox or menuitemcheckbox.

The mixed value is not supported on radio or menuitemradio

Actual behavior

mixed-value is not communicated to screen reader users

[najikahalsema]

Do we only want this for the mixed-value attribute or would the nothing attribute benefit from this usage, too? https://opensource.adobe.com/spectrum-web-components/components/swatch/

[dineshy87]

Only mixed-value.

nothing means no color or transparent. And i think that should be communicated by the label for all swatches using 'nothing'. That said, i have a question about labelling these swatches. Documentation doesn't have labels for these swatches even though the api allows label attribute. Does it make sense to use color value as the value for aria-label on swatches conditionally if label attribute is absent? If yes, let me know, I'll create a separate issue for that.

[najikahalsema]

Good question. I think what's become clear through this audit, as well as comments we've had in the past from other consumers, is that our label attribute is inconsistent between components. I'm currently taking inventory of all of the differences, so it's good to know that this one will be included. I think your logic makes sense though, so I would appreciate a new issue for that :) Thank you!

[Rajdeepc]

PR fix: #3330

[najikahalsema]

I was looking at Rajdeep's PR, and I have some questions about fixing the issue:

Swatch currently has the role of "button" by default, not checkbox, so it will only denote aria-checked="mixed" when the Swatch is in a SwatchGroup with selection="multiple". This seems relatively specific and doesn't account for the other use cases, like a standalone swatch, a swatch that isn't selectable, or a swatch that is by itself. In the case of a single mixed-value swatch element, the screenreader only denotes that it's a button. What more information could we add to clarify what this is?

I did see you added #3320 so perhaps adding this kind of label will clarify some things in the screen reader. @Rajdeepc, let's chat tomorrow about adding this functionality.

[dineshy87]

I think the intent of the mixed state should be made clear in the documentation as well. That the mixed state is meaningful with a swatchgroup that has selection="multiple". And as you said, if they're using it in other scenarios then the burden is on them to use appropriate labels to convey what they're trying to do.

[Rajdeepc]

PR is merged and waiting for testing.

[Rajdeepc]

@dineshy87 Can you please verify this from your end and let us know?
cc @jnjosh

[Rajdeepc]

@dineshy87 Awaiting your confirmation on this. Thank you

[dineshy87]

Problem with this implementation of mixed state is that aria-mixed is not allowed on elements with button role. The best way to fix this issue is by rendering a group of checkboxes when swatch group uses selects='multiple'. And then, if one of the swatches uses mixed-value, it can then communicate the mixed state using aria-checked="mixed" Current implementation in PR will result in violations on Axe browser extension.

[Rajdeepc]

@najikahalsema Let me know your thoughts on the above issue raised by Dinesh during testing. Should we track this here or on another issue?

[najikahalsema]

I think I'm confused now 😅 My understanding was that that aria-checked = mixed only applies in a limited circumstance, and I thought that @Rajdeepc's PR only accounted for this circumstance and didn't apply the aria attribute in circumstances where it did not apply. Based on @dineshy87's comment, it seems like he is seeing this attribute in other places besides that limited situation (ie a swatch that isn't in a swatch group), so we may need to go back and add a few more gates to the logic to make sure the attribute is only applied when the swatch is in a group where selects = multiple... So I think this issue can still be open even though it does have a solution. That solution just isn't applicable to all circumstances where the Swatch has a mixed value. Does that make sense?

[dineshy87]

Let me clarify a little bit more. The problem will persist as long as the swatches have role="button" on them when selects="multiple" is used. My recommendation is to render individual swatches in swatch-group with selects="multiple" as checkboxes instead of buttons. Only then, aria-checked="mixed" will make sense.

[najikahalsema]

Do they not convert to checkbox state when selects = multiple? I believe what you suggest is already in the code.

[dineshy87]

Oops sorry. It seems that they do. However, the screenshot i shared above is from documentation for swatch which has examples for mixed state that need to be updated. Because they're being used in places other than where selects="multiple" is used. And if you run Axe on the below page, you'll find those errors. https://opensource.adobe.com/spectrum-web-components/components/swatch/

I'd recommend the example be corrected to use selects='multiple'.

[Rajdeepc]

@najikahalsema PR for the changes requested above.
#3455

[Rajdeepc]

Follow up issue tracking here: #3458