Hello,
We have build an app using Ionic React (currently v7.5) that we deploy to iOS, Android and browser.
Our UX designer has designed components that have multiple elements (text, icon, image, etc.) aligned horizontally next to each other. For example:
- A Card component that has an image on the left, text in the middle and an icon with text on the right.
- An Explainer component that has a text to the left and a text to the right, divided by a vertical dash
Often these horizontally aligned elements have a specific width (e.g. 50%) or should be the element that fills up the remaining horizontal space. Ideally, this fits in flexbox layout.
Question: we are looking for the best-practice on what component to use for such layouting.
Some options:
Use of IonItem
- Pro: it can be modified to have the appropriate dimensions.
- Con: in terms of function, it should be used as a list item (while in this case it is used as structural element outside a list). Accessibility checks flag an IonItem that is not part of a list as a component with a role “listitem” that is not part of a list (critical/severe accessibility issue).
Use of divs (flexbox)
- Pro: it can be easily configured to have the appropriate dimensions using flexbox.
- Con: meaningless (non-functional) element that is being discouraged to use from accessibility point-of-view.
Use of IonGrid
- Pro: it can be easily configured (IonGrid, IonRow, IonCol) to have the appropriate dimensions.
- Pro: it seems to be in-line with accessibility rules in terms of appropriate roles
- Question: we don’t know if it is intended for smaller (fine-grained) layouting of components on a page, or only for the main layout of an app? We also have a main grid using IonGrid in our app, so we have different “nested” grids if we use this approach.
Curious to hear about best-practices from other people on this forum.
Thanks,
Ronald