[grid] Optional row-details toggle column

[rolfsmeds]

A static column for toggling row details would be beneficial in the following ways:

1. Visual indicator that the row can be expanded to show details.
2. Provides a dedicated element for toggling row details, instead of relying on clicking anywhere on the row, which conflicts with single-selection and custom interactive elements (like buttons) in cells.
3. Solves current issue with editable cells not usable for details toggling in vaadin-grid-pro by providing a dedicated toggle element.

[rolfsmeds]

Notes about how this could be implemented:

• Although it would seem obvious to use aria-controls on the toggle column cells to refer to the details cell, screen reader support for it is woefully lacking.
• aria-expanded is probably all we have to work with (in terms of ARIA features actually supported by screen readers), but I haven't been able to find information on whether it's actually supported on gridcell elements. If not, we could set the attribute on the button inside the cell instead, although that will probably mean it won't be announced unless focus is moved from the cell to the button inside. Also need to check if aria-expanded works when the referred element has display:none when collapsed.
• As Grid currently lacks API for i18n, the aria-label on the cell/button will be hardcoded in English, until https://github.com/vaadin/web-components/issues/3471 is fixed.
• The column should probably be at the end of the row so as not to be confused with the TreeGrid expand/collapse toggle.
• The column should be frozen to ensure its visibility.
• The same icon can be used as for TreeGrid and e.g. Accordion
• The toggle will be visible on all rows. In cases where only some rows actually have details, a mechanism would need to be introduced to determine whether the toggle should be shown, but this is outside of the scope of this feature for now.
• Not sure how it should handle the situation where a details renderer has not been defined. (Either throw an exception or just not render the toggle column?)
• Presumably enabling the toggle column should auotmatically set setDetailsVisibleOnClick(false) in the Flow Grid in order to disable opening details on clicks elsewhere on the row. A parameter could perhaps be used to choose this, e.g. setDetailsToggleColumnVisible(boolean toggleVisible, boolean rowClickToggleEnabled)

[sissbruecker]

Some notes from my investigation:

• Can be implemented similar to selection column
  • Web component has a column element with rendering and toggle logic
  • Flow component has its own custom element that extends from the WC column to override expand / collapse so that they delegate to the server
• Need to clarify the ordering of the details toggle column for the Flow component. If setDetailsToggleColumnVisible just automatically adds the column, how is it ordered in case there are other frozen-to-end columns? Should users have a way to get a reference to the column so that they can change the order (not possible with selection column currently)? Easiest would probably be to always show it as the first frozen-to-end column.

[rolfsmeds]

I'd say it should always be the last frozen-to-end column, just like the selection column is always the first frozen-to-start column.

An additional detail here is that we've had a request to make it possible to have the details toggle frozen-to-start instead, so that would then require some kind of API for that choice.