fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

TagPicker: deleting a tag by using Backspace on input is not accessible

Open bsunderhus opened this issue 1 year ago • 5 comments

Current behavior

Currently there's no indication that a tag will be removed once the Backspace keyboard is press on the combobox element.

Expected behavior

There should be some sort of narration or at least a description on the combobox itself indicating that this interaction is possible

bsunderhus avatar Apr 24 '24 05:04 bsunderhus

Why not add the desired aria label or description to the field manually?

jacksonv1lle avatar Apr 26 '24 17:04 jacksonv1lle

Why not add the desired aria label or description to the field manually?

I guess it is a possibility, but might be too verbose for a label, and too important to be just a description?! Maybe you could provide an example @jacksonv1lle ?!

bsunderhus avatar May 02 '24 10:05 bsunderhus

Here is an example of how you could add an accessible description to the input field.

<TagPickerInput aria-label="Select Entity" aria-describedby="description" />
<span id="description">Use backspace to remove an entity</span>

jacksonv1lle avatar May 03 '24 08:05 jacksonv1lle

Here is an example of how you could add an accessible description to the input field.

<TagPickerInput aria-label="Select Entity" aria-describedby="description" />
<span id="description">Use backspace to remove an entity</span>

A lot of power users do not have description narration by default, as it might be too verbose, so they would miss this feature description. I'm not sure this would be ideal for a behavior, this is not some extra information about the content, this is an action you can take to remove elements

bsunderhus avatar May 03 '24 09:05 bsunderhus

Yeah, putting specific interaction instructions into labels or descriptions is kinda an antipattern. As @bsunderhus mentioned, a lot of users don't have descriptions on be default, and even those who do tend to not listen to it (as was made obvious in a recent user study about a custom attachment interaction 😅).

IMO the best way to handle this would be to move focus onto the most recent tag with the first backspace -- this is what Slack does, and if it were really text then there would need to be an extra backspace for the space character anyway. That also removes the need for custom live region text, and it treats the tag values as similar to actual input text.

smhigley avatar May 06 '24 18:05 smhigley