Best practices for TagGroup keyboard navigation

[lixiaoyan]

WAI-ARIA seems to recommend a different keyboard navigation approach for tag groups. What do you think?
@snowystinger

https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/#ex2_label

It seems that React Aria’s grid list currently doesn’t support a similar capability.

[snowystinger]

Just to start, WAI Aria is just guidelines/ideas, it doesn't have to be implemented that way. https://www.w3.org/WAI/ARIA/apg/about/introduction/

Now, I assume you are referring to arrow left/right navigating through each item + remove button?

We implemented the pattern as a whole a little differently, the example in apg patterns has the label and the remove button as two separate columns/cells inside each row/tag.

Our implementation has the label and the remove button inside the same column/cell. If focus went to the remove button first, then we'd need to add the tag label to the button for context. This would result in a double announcement when focusing the tag.
Roughly something like:

<tag>
  <span id="label">Foo</span>
  <button aria-labelledby="label remove" id="remove" aria-label="remove">x</button>
</tag>

resulting in "Foo, Foo remove" when focusing a tag.

So all of that stems from the choice to implement the pattern a little differently. This was done because the browser x accessible technology matrix doesn't quite support grid lists super well yet. It's getting there. In which case we may reevaluate and change the tag group implementation at a later date.

@LFDanLu you were more involved in that decision, please correct me if I misremembered