web-components feat: add column API to set button role on the slot

feat: add column API to set button role on the slot

Open web-padawan opened this issue 2 years ago • 2 comments

Description

Pre-requisite for #3820

This PR adds a new internal API for vaadin-grid-column element to change how its body cells are rendered. The idea behind the DOM structure is to align with ARIA example for data grid with editable cells.

As discovered in #4114, VoiceOver on MacOS does not trigger focus events when navigating between <td> elements that have tabindex attribute. However, in case if an element inside <td> has tabindex, it gets focused.

So the outcome of this change is being able to keep keyboard focus in sync with VoiceOver cursor, so that pressing Enter on the editable cell in vaadin-grid-pro would start editing for the correct cell.

Normal cells

<td role="gridcell">
  <slot name="vaadin-grid-cell-content-12"></slot>
</td>

Cells with button

<td role="gridcell">
  <div role="button" tabindex="-1">
    <slot name="vaadin-grid-cell-content-12"></slot>
  </div>
</td>

Type of change

Internal feature

Note

This PR does not contain any changes to vaadin-grid-pro, they will be implemented in a separate PR. As an example, we might need to also remove role attribute when rendering editor (e.g. vaadin-text-field) into the cell content, to avoid confusing screen reader announcement, and then restore role="button" on the div after editing is stopped.