Feature Description

We want to implement the sbb-autocomplete-grid component in order to provide the possibility to add a custom action (e.g. "Add to favourites") to the autocomplete options.

Reference Guideline: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/grid-combo/

PoC
Reference
Figma Spec

Examples/References (in both you have to enter a search term to have it available to delete the history in future searches):
https://www.google.com/
https://music.youtube.com/

Design Spec

• The autocomplete is an overlay attached to the respective input/sbb-form-field or a given origin.
• The autocomplete grid looks exactly as a regular autocomplete and only adds an optional custom action next the the autocomplete option(s).

Technical Spec

• See sbb-autocomplete imlpementation https://lyne-storybook.app.sbb.ch/?path=/docs/components-sbb-autocomplete--docs.
• The sbb-autocomplete-grid introduces few more specific components to provide the options and the relative custom action:
  • sbb-autocomplete-grid-row;
    • sbb-autocomplete-grid-option;
    • sbb-autocomplete-grid-button for which an icon-name can be provided via prop;
• When a button is clicked, the behaviour should be up to the consumer.
• sbb-autocomplete-grid-button should have a method (or in lit a getter) that returns the related sbb-autocomplete-grid-option
• We must use this approach in order to preserve the meaningful aria role='combobox' strategy on the normal sbb-autocomplete and make it possible to add the custom action feature with sbb-autocomplete-grid, but with the disadvantage of a less robust accessibility, since we cannot use the 'combobox' in this case.

Accessibility

Consider the usage of the ARIA: grid role pattern.

<input id="autocomplete-input">

<sbb-autocomplete-grid trigger="autocomplete-input">
  <sbb-autocomplete-grid-row>
    <sbb-autocomplete-grid-option>Option 1</sbb-autocomplete-grid-option>
    <sbb-autocomplete-grid-actions>
      <sbb-mini-button icon-name="pen-small" title="Edit"></sbb-mini-button>
      <sbb-mini-button icon-name="trash-small" title="Delete"></sbb-mini-button>
    </sbb-autocomplete-grid-actions>
  </sbb-autocomplete-grid-row>
</sbb-autocomplete-grid>

Definition of Done

• Component is implemented
• Documentation is provided
• Tests are implemented
• E2E Tests are implemented
• Storybook stories are implemented
• Navigation via keyboard is tested
• Screen reader output is tested
• High-contrast is tested
• Remaining accessibility is tested
• UX approved