Text cell with help text in grid

[lassopicasso]

Description

Two new configuration options have been introduced for grid cells:

1. In addition to the text prop, the current text cell now also supports the help prop, which allows to include help text along with the text prop.
2. A new type of cell has been added, which functions similarly to the text cell, but instead refers to text resources from a component. It uses the property labelFrom with the corresponding component ID. In the referenced component, you can access the title (which serves as the label for the component), description, and help to provide help text.

Example 1:

            "cells": [
              { "text": "laan-bolig", "help": "Dette er en hjelpetekst til laan-bolig" },
              ...
            ]

Example 2:

            "cells": [
              { "labelFrom": "<component-id>"},
              ...
            ]

Related Issue(s)

• closes #Grid component: Helptext in text cells #1230

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
    Help text in grid cells altinn-studio-docs#1011
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Changes/additions to component properties
  • Changes are reflected in both src/layout/layout.d.ts and layout.schema.v1.json, and these are all backwards-compatible
  • No changes made
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

[olemartinorg]

Hmm. A few comments on this one:

1. I don't think we need the logic for aria-describedby. Components in Grid are described by their own text resources, as they are required for mobile support. Meaning, the components in the table have everything they need for accessibility already. Also the description should come from the description text resource binding - help text is something else.
2. We can't make the assumption that a text cell describes all components in the same row. It's entirely valid to have a row that is [text cell, component, text cell, component], and so making assumptions that the first text cell describes the last component is most likely false.
3. The thing I remember we discussed was to avoid duplicating the help text by referencing a component (the other way around from what is done here). Meaning that you could for example implement a row like:

{
  "cells": [
    { "textFrom": "myComponent" },
    { "component": "myComponent" }
  ]
}

And such a configuration would fetch the texts (i.e. title, help and possibly also description) from the target component and put them in the text cell. That way you get most of the same effects of the aria-describedby feature added here, but also:

• No need to add the text resource bindings twice (both on the component and in the text cell)
• We can implement functionality to make the title/description/label to work as a label (i.e. clicking on it focuses the target field)

[lassopicasso]

Understood, thanks for the feedback @olemartinorg ! 👍🙏

[olemartinorg]

This looks great! 🚀 Some very minor and optional nitpicks in the comments.

[sonarcloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

6.3% Coverage
0.0% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint