[Data Views][Accessibility] Improvements to grid layout semantics/navigation

[andrewhayward]

What problem does this address?

• Grid layouts are currently semantically ambiguous, with no structural scaffolding to denote which fields relate to each other.
• As such, they are also difficult to navigate with a keyboard, as every tab stop/element is presented to the user with no way to skip content.
• Media items are also rendered as buttons, but with no clear semantic purpose as to what they do.
• Grid items can be selected/deselected with a Cmd/Ctrl click, but this is not apparent until the click happens.

What is your proposed solution?

• Add structural semantics to grid items
  • At a minimum, each item should be marked as a group. However, given the 'grid' aesthetic of the layout, a grid/gridcell relationship would be more appropriate.
  • Note that grid cells must be appropriately contained by rows.
  • [Data Views][Grid Layout] Adding semantics and basic keyboard navigation #59279
• Improve keyboard navigation
  • Allow users to navigate through grid items without having to hit every tab stop (for example, by using a grid pattern).
  • [Data Views][Grid Layout] Adding semantics and basic keyboard navigation #59279
• Remove media item buttons, and instead allow primary link actions to consume their footprint.
  • This might be by including the media item in the link, wrapping the media item in an equivalent link, or by covering the footprint with the primary link.
• Make it clearer that Cmd/Ctrl clicking a grid item will select/deselect it
  • This could be by changing the cursor during hover, or changing the state of the grid item
  • [Data Views][Grid Layout] Making cmd/ctrl clicking more apparent #59292