Tag with removal interaction concern

[vhayamplify]

Provide a general summary of the feature here

There should be 1 tab stop per interaction with Tags in TagGroup. Currently, if there is the option to remove Tags, there are 2 tab stops and users must switch between Tab and arrow keys to navigate. While not a strict accessibility violation, this is unusual behavior.

🤔 Expected Behavior?

Microsoft's TagGroup w/dismiss is a good example of a cleaner model:

• One tab stop when the only action is removal.
• Two stops only if the label itself is also interactive.
• Navigation handled purely through arrow keys — no mixing with Tab

😯 Current Behavior

Can be seen here

• The chip label and the remove button are separate tab stops
• Users have to alternate between Tab and arrow keys to move through the component.

💁 Possible Solution

Restructure so each row contains a single interactive element. Something like:

<div role="row">
    <div role="gridcell">
      <button aria-label="label">
        Text
        <span aria-hidden="true">
          <!-- close icon -->
        </span>
      </button>
    </div>
  </div>

🔦 Context

We are building a design system using React Aria components, including TagGroup. While not a strict violation, this issue was flagged by our Accessibility Audit.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

You can still use the Delete key to remove tags, so you aren't required to tab into it.

[yihuiliao]

For more context, the behavior was updated after discussing it in this issue #7483. In their accessibility audit, they flagged not being able to focus the Delete as an accessibility issue, seems like the opposite here. I don't think there's really any "correct" behavior since I think an argument can be made in either case. Like @reidbarber said, you can use Delete to remove any tags and use the arrow keys to navigate between Tabs which is similar to the Microsoft case