Card Interactions

Overview

Cards allow variety of options for user interaction. The whole card can be an interactive element (experimental), or, alternatively, the card can contain interactive elements - card header, links, buttons, list items, and others.

Whole Card Interaction (Experimental)

Clicking anywhere in the card can trigger an action, making the whole card interactive.

Whole Card Interaction has specific requirements, related to accessibility standards: the card must have the role of "listitem" and it must be located within a "list." If the card is not designated as a "listitem," this type of interaction will not function properly.

To achieve Whole Card Interaction the host environment can leverage one of the following options:

• Using sap.f.GridContainer. In this case the role assignment and the rest of the accessibility requirements will be handled automatically.
  You can see a sample with UI Integration Cards and a generic sap.f.GridContainer sample. Additionally you can find out more in the documentation in Demo Kit.
• Custom layout - The host environment can create its own layout. Cards must be contained within an element with the role "list". Each card must have its property semanticRole set to ListItem.
  You can see the related sample with custom layout.
  Note: The layout must have the role of "list" and should properly handle keyboard navigation and screen reader functionality.