olemartinorg
commented
1 year ago Adding the ux label here, because we should rather think up "the way" to display a Grid component in a mobile-friendly way. In a sense, the Grid component is inherently incompatible with a mobile viewport, but all components used in a Grid must have accessibility information configured (such as title in their text resource bindings), so just displaying the components themselves (without the text cells) should give the user all the information they need.
Look at the screenshots in the docs:
- https://docs.altinn.studio/app/development/ux/components/grid/
- https://docs.altinn.studio/app/development/ux/components/grid/#mobile-support
In the Grid/table, the first component is displayed on the right of the "Boliglån" text cell, and underneath the "Fordeling" header. We could perhaps display both "Boliglån" and "Fordeling" as stand-alone paragraphs somewhere over the component, but that does not convey the information the user needs. In the mobile screenshot, the component itself has been given a title of "Prosentandel av gjeld i boliglån" which is also the text a screen-reader tool uses when the component is displayed in a Grid/table. In my opinion, that component label is sufficient (and should be sufficient), so showing the text cells containing "Fordeling" and "Boliglån" somewhere just adds noise in a mobile setting.
Description of the bug
Text cells are not rendered in the new grid component when it is displayed as a table in mobile viewport.
This happens because of
nodesFromGridis called in mobile viewport and it skips cells that contains text. See image below. A possible solution is to use paragraph components instead, but this is probably not an optimal solution since text cells works in desktop view?Steps To Reproduce
Additional Information
Conversation with SSB about this: https://altinn.slack.com/archives/C02EVE4RU82/p1683103041485429