TagPicker: deleting a tag by using Backspace on input is not accessible
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
Why not add the desired aria label or description to the field manually?
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 ?!
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>
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
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.