TagGroup accessibility issue: removing tags with keyboard alone

[CarynPagelTR]

Provide a general summary of the issue here

To remove a tag with keyboard alone, the user has to press Backspace/Delete while the tag is focused. This is not an expected interaction for keyboard users. A keyboard user will expect the x/delete button to receive focus and to press Enter or Spacebar to activate it, as they would for any other element.

🤔 Expected Behavior?

• Tag does not receive keyboard focus, because it is not an interactive element.
• x/delete button is an HTML button element, therefore:
  -- receives keyboard focus
  -- can be activated via Enter or Spacebar keys.

😯 Current Behavior

• Tag receives keyboard focus.
• x/delete button does not receive keyboard focus.
• To delete a tag with keyboard, user has to bring focus to the tag, and press Backspace/Delete.

💁 Possible Solution

• Remove tabindex attribute from
  and

Remove aria-labelledby attribute from

Update aria-label value on

to be clear.

Current HTML:

Shopping

ⓧ

Suggested HTML:

Shopping ⓧ

🔦 Context

This component is unusable for a keyboard user unless they are able to guess the keyboard interaction.

🖥️ Steps to Reproduce

1. Visit https://react-spectrum.adobe.com/react-aria/TagGroup.html#removing-tags using any browser.
2. Use keyboard alone (no screen reader, no mouse, no touch screen) to attempt to remove a tag.
3. Notice the delete button does receive focus and cannot be activated with Enter/Return or Spacebar.

Version

1.5

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Mac. Same issue happens on Windows.

🧢 Your Company/Team

Thomson Reuters / The Insurer

🕷 Tracking Issue

No response

[snowystinger]

This is working as expected, using Enter or Space would conflict with Selection.
https://react-spectrum.adobe.com/react-aria/TagGroup.html#selection

[CarynPagelTR]

@snowystinger Are you saying that because Adobe doesn't want to change the way this component works, that justifies not solving an accessibility issue?

[snowystinger]

That’s not what I’m saying. I’m saying it’s not an accessibility issue, that’s too broad a claim.

Pressing Delete to delete or remove something is a common pattern.
An AT user would also hear an announcement describing how to delete a tag.

The remove button isn’t additionally focusable because that introduces another focus stop for every tag, making navigating them tedious for a keyboard or screen reader user.

That’s not to say we couldn’t change it or add a different mode, but stating that it’s breaking accessibility is not correct.

[CarynPagelTR]

@snowystinger I double-checked with the rest of our Accessibility team today and we agree that this is an accessibility issue for keyboard-only users. We're focused on all users, not just AT users. In this case, keyboard-only users who are not using AT may not know to press Delete/Backspace. If the users were instructed how to delete tags, that would alleviate some pain. But since there are no visible instructions or hints, keyboard users will expect the x/Delete button to get focus and then be able to press Enter or Spacebar to activate it. Since it sounds like Adobe will not be taking any action, we will have to look into adding visible instructions on our end.

[devongovett]

Do you have user research showing this is an actual issue and not just a theoretical one? I think it's pretty common that when you want to delete something you press the Delete key on your keyboard. This is used across tons of applications that most users and especially keyboard users will be familiar with, e.g. deleting files, deleting emails, etc. If you have research showing that users are actually having problems using the UI that's one thing, but I don't think we should assume that users only know how to press the Tab and Enter keys and nothing else.

By your logic, users might also not know that they need to press the arrow keys to move between tags. Perhaps if your users are unfamiliar with keyboard interfaces it might be best to add visible instructions for all of these interactions not just Delete, but I think we need to assume a baseline level of understanding in order to make the keyboard interface as intuitive as possible (following common patterns) while also not making it inefficient for experienced users.

[CarynPagelTR]

@devongovett You're correct; the Backspace/Delete key is used to delete things. In the examples you provided - file & emails - there is an alternative method to delete, usually a Delete button within the application. We haven't performed user research on the Backspace/Delete key. We had accessibility testers, accessibility specialists, and software engineers didn't know to press the Backspace/Delete key on the tags to delete them. Does Adobe have research showing that users do know how to delete tags using Backspace/Delete key?

Pressing arrow keys to navigate through long lists of content is standard, and I didn't say it wasn't. It's not the same logic at all. There are plenty of components that use arrow keys on the web.

[devongovett]

We had accessibility testers, accessibility specialists, and software engineers didn't know to press the Delete key on the tags to delete them

I do think looking at this as an auditor is different from looking at it as a user (you know how it's implemented technically, you're actively looking for potential issues, etc.), but I appreciate the feedback.

Does Adobe have research showing that users do know how to delete tags?

Not exactly, but it has worked this way for many years and we haven't heard any negative feedback from our users that I'm aware of.

There are plenty of components that use arrow keys on the web.

I'd argue that this is true of delete as well. Microsoft's tag component works similarly to ours for example.

All that being said, perhaps we could make TagGroup follow a similar pattern to our other grid components while retaining support for the Delete and Backspace keys as shortcuts. We recently introduced support for a mode in the GridList component where you arrow key navigate between items, and press tab to access buttons inside an item (#6486). After tabbing through the focusable elements inside an item, you're taken out of the list. This allows efficiently navigating the list with arrow keys, and accessing the child focusable elements of an item when needed.

Now that we have this mode in the underlying hooks, we could potentially apply it to TagGroup as well. Would that work for you?

[CarynPagelTR]

I agree that it's different testing with Accessibility testers and specialists vs. real users. In this case though, I'd argue that our Accessibility testers and specialists are more technically advanced than average users. So the fact that we couldn't figure out the Backspace/Delete key until looking at the RA documentation says something. I think the potential solution you've suggested sounds promising!

[devongovett]

In that case I'll reopen this issue. If you're interesting in contributing, I think it would be pretty straightforward. Essentially adding keyboardNavigationBehavior: 'tab' here:

react-spectrum/packages/@react-aria/tag/src/useTagGroup.ts

Lines 78 to 84 in b37f279

	let {gridProps} = useGridList({
	...props,
	...fieldProps,
	keyboardDelegate,
	shouldFocusWrap: true,
	linkBehavior: 'override'
	}, state, ref);

and removing these two lines:

react-spectrum/packages/@react-aria/tag/src/useTag.ts

Line 60 in b37f279

delete rowProps.onKeyDownCapture;

react-spectrum/packages/@react-aria/tag/src/useTag.ts

Line 103 in b37f279

excludeFromTabOrder: true

and adding some tests.

We'll also likely need to update our Spectrum implementation to add a focus ring on the button, but we can handle that part once the react-aria changes are made.

[CarynPagelTR]

I'm an Accessibility Specialist, but I'll check with some of our Software Engineers next week to see if anyone can help with the contribution. Thanks @devongovett!