Update components to allow for adding `lang` attributes to text
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary
This relates to / is an extension of #4046.
Quite a few of our components allow text to be displayed but don't allow for `lang` attributes to be added to this text. All of the components which have this issue need updating in some way to allow this.
This ticket should probably involve exploring the best solution (might just be using slots but best to consider all options - may depend on the outcome for #4046), and then implementing this for all bits of text in all components (consider splitting this up into different tickets if this is a lot of work).
### 💬 Description
Developers may want to add the `lang` attribute to text to inform screen readers that certain words are in a different language, which will ensure they get pronounced correctly.
For some bits of text in our components, this is possible using slots, but in other areas, it is not possible at all because the text is either built-in or passed as a plain string using props. Some examples:
- Label on badges (which uses the `label` prop)
- Label on breadcrumbs (which uses the `page-title` prop)
Developers may want to either add it to the whole piece of text or just certain words e.g.: `Vorrei un cappuccino` or `I'd like a cappuccino`, so the solution needs to allow for this.
### 💰 Use value
This will ensure we meet the WCAG criterion 3.1.2 Language of Parts.
### 🚨 Urgency (low, medium or high)
Probably quite high urgency as the WCAG criterion this contributes towards is Level AA.
### Additional info
It's important to check all screen reader behaviour works as these changes may have a big impact. Not sure if it will be completely possible to check with VoiceOver as mentioned in this [comment](https://github.com/mi6/ic-ui-kit/issues/4046#issuecomment-3462111003).
Something to consider - do we need to also allow something similar for accessible text? E.g. something like the `maxCharactersMessage` on the text field - do we need to allow developer to add `lang` to words in this?
Contributor guide
Research direction
Start by reading the linked issue #4046 and inventorying every component text prop, built-in label, and accessible message that cannot currently receive a lang attribute. Check the affected components with screen readers, including the VoiceOver limitation noted in the issue. Done means all relevant text supports whole-text and inline language changes without regressions, with the scope split into smaller issues if needed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100