ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard
verified publisher icon mi6

Update components to allow for adding `lang` attributes to text

Open GCHQ-Developer-847 opened this issue 2 months ago • 4 comments

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.: <span lang="it">Vorrei un cappuccino</span> or <span>I'd like a <span lang="it">cappuccino</span></span>, 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.

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?

GCHQ-Developer-847 avatar Nov 04 '25 13:11 GCHQ-Developer-847

~~Might be best to leave this ticket until #4046 is done, as this ticket is a continuation of that. Also, whatever solution we decide to go with in that ticket, we should then probably implement with this - for consistency.~~

On second thoughts, it should probably be fine if someone were to work on this at the same time as #4046 - just as long as the same approach is used for consistency (e.g. slots or innerHTML). (That other ticket is more urgent though so prioritise working on it over this one)

GCHQ-Developer-847 avatar Nov 04 '25 13:11 GCHQ-Developer-847

I don't know if it will be necessary to allow this for every single bit of text in all our components. It's quite hard to tell as I would need to look through the code for all components - just something to keep in mind, but I think it will be the vast majority of text in components. Probably just worth assessing on a case by case basis

GCHQ-Developer-847 avatar Nov 06 '25 09:11 GCHQ-Developer-847

Initial spike is needed to identify what components need updating as part of this work, and what should be covered under I18n work. Create spike as child ticket.

GCHQ-Developer-299 avatar Nov 06 '25 09:11 GCHQ-Developer-299

Using the example <span>I'd like a <span lang="it">cappuccino</span></span> where cappuccino is a word that you might want to keep as Italian, these are the props that I think need equivalent slot across the components. I’ve added an example to each, happy to have push back on any that might be an edge case.

  • [ ] Accordion group
    • [ ] accessibleButtonLabel prop - See all/Hide all <span lang=“it”>cappuccino</span>
  • [ ] Action chip
    • [ ] label prop - Confirm <span lang=“it”>cappuccino</span> order
  • [ ] Alert
    • [ ] heading prop - <span lang=“it”>Cappuccino</span> order
    • [ ] dismissLabel prop - Dismiss <span lang=“it”>Cappuccino</span> order
  • [ ] Badge
    • [ ] label prop - 1 <span lang=“it”>Cappuccino</span>
    • [ ] accessibleLabel prop - 1 <span lang=“it”>Cappuccino</span> ready for collection
  • [ ] Breadcrumb
    • [ ] pageTitle prop - <span lang=“it”>Cappuccino</span> orders
  • [ ] Checkbox
    • [ ] dynamicText prop - Would you like to add milk to your <span lang=“it”>cappuccino</span>?
    • [ ] label prop - 1 <span lang=“it”>Cappuccino</span> (https://github.com/mi6/ic-ui-kit/pull/4085)
  • [ ] Checkbox group
    • [ ] label prop - What kind of milk would you like with your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
  • [ ] Chip
    • [ ] label prop - 1 <span lang=“it”>Cappuccino</span>
    • [ ] dismissLabel prop - Dismiss <span lang=“it”>Cappuccino</span> order
  • [ ] Classification banner
    • [ ] additionalSelectors prop - Not got an example using cappuccino but it’s possible that we may need different languages in a classification banner
  • [ ] Data table (Note: may need to reassess after https://github.com/mi6/ic-ui-kit/issues/1539)
    • [ ] caption prop - List of <span lang=“it”>cappuccino</span> orders
    • [ ] loadingOptions prop - If ic-loading-indicator gets updated to slot content, then we should be able to slot the content into data table and pass it through
    • [ ] paginationBarOptions - If ic-pagination-bar/ic-pagination get updated to slot content, then we should be able to slot the content into data table and pass it through
  • [ ] Data table title bar
    • [ ] metadata prop - 45 <span lang=“it”>cappuccinos</span> sold in 20 minutes
  • [ ] Date input
    • [ ] disableDaysMessage prop - There are no <span lang=“it”>cappuccinos</span> on that day
    • [ ] disableFutureMessage prop - There are no <span lang=“it”>cappuccinos</span> expected to be in stock in the future
    • [ ] disablePastMessage prop - There were no <span lang=“it”>cappuccinos</span> in stock
    • [ ] label prop - What day would you like your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
    • [ ] Clear button aria label - Does this need a dismissLabel prop/slot like chip/alert etc.? - Dismiss <span lang=“it”>Cappuccino</span> order date
  • [ ] Date picker
    • [ ] disableDaysMessage prop - There are no <span lang=“it”>cappuccinos</span> on that day
    • [ ] disableFutureMessage prop - There are no <span lang=“it”>cappuccinos</span> expected to be in stock in the future
    • [ ] disablePastMessage prop - There were no <span lang=“it”>cappuccinos</span> in stock
    • [ ] label prop - What day would you like your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
  • [ ] Dialog
    • [ ] dismissLabel prop - Dismiss <span lang=“it”>Cappuccino</span> order
  • [ ] Divider
    • [ ] label slot just needs documenting with @slot at the top of the file
  • [ ] Footer
    • [ ] copyright prop - https://github.com/mi6/ic-ui-kit/issues/4048
  • [ ] Footer link group
    • [ ] label prop - Notable <span lang=“it”>cappuccino</span> orders
  • [ ] Input label
    • [ ] label prop - Used in form components e.g. checkbox, radio, select etc. - NEEDS TO BE DONE FIRST
  • [ ] Input validation
    • [ ] message prop - Used in form components e.g. checkbox, radio, date input etc. - NEEDS TO BE DONE FIRST
  • [ ] Loading indicator
    • [ ] description prop - Loading <span lang=“it”>cappuccino</span> orders
    • [ ] label prop - Loading <span lang=“it”>cappuccino</span> orders
  • [ ] Menu group
    • [ ] label prop - Milk options for <span lang=“it”>cappuccino</span>
  • [ ] Menu item
    • [ ] label prop - <span lang=“it”>Cappuccino</span> to takeaway
    • [ ] description prop - A <span lang=“it”>cappuccino</span> is a type of coffee made with espresso and milk that has been frothed up
  • [ ] Navigation button
    • [ ] label prop - <span lang=“it”>Cappuccino</span> order form
  • [ ] Navigation group
    • [ ] label prop - <span lang=“it”>Cappuccino</span> orders
  • [ ] Navigation menu
    • [ ] status prop - 1 <span lang=“it”>Cappuccino</span>
    • [ ] version prop - If we’re adding a slot for the status, we probably should for version, but probably not for i18n purposes
  • [ ] Pagination
    • [ ] label prop - <span lang=“it”>Cappuccino</span> order no. 6
    • [ ] Screen reader only text “page ${this.currentPage}” is hard coded, but if we’re adding a label slot and the label prop currently changes the word “page”, does this not need updating to “${this.label} ${this.currentPage}”?
  • [ ] Pagination bar
    • [ ] itemLabel prop - <span lang=“it”>Cappuccino</span> order no. 6
    • [ ] pageLabel prop - <span lang=“it”>Cappuccino</span> order no. 6
  • [ ] Pagination item
    • [ ] label prop - <span lang=“it”>Cappuccino</span> order no. 6
  • [ ] Radio group
    • [ ] label prop - What kind of milk would you like with your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
  • [ ] Radio option
    • [ ] dynamicText prop - Would you like to add milk to your <span lang=“it”>cappuccino</span>?
    • [ ] label prop - 1 <span lang=“it”>Cappuccino</span>
  • [ ] Search bar
    • [ ] emptyOptionListText prop - No <span lang=“it”>cappuccino</span> orders
    • [ ] label prop - What kind of milk would you like with your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] loadingErrorLabel prop - Cannot load <span lang=“it”>cappuccino</span> orders
    • [ ] loadingLabel prop - Loading <span lang=“it”>cappuccino</span> orders
    • [ ] placeholder prop - Search <span lang=“it”>cappuccino</span> orders
    • [ ] Clear button aria label - Does this need a dismissLabel prop/slot like chip/alert etc.? - Clear <span lang=“it”>Cappuccino</span> order search
  • [ ] Select
    • [ ] emptyOptionListText prop - No <span lang=“it”>cappuccino</span> orders
    • [ ] label prop - What kind of milk would you like with your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] loadingErrorLabel prop - Cannot load <span lang=“it”>cappuccino</span> orders
    • [ ] loadingLabel prop - Loading <span lang=“it”>cappuccino</span> orders
    • [ ] placeholder prop - Select a <span lang=“it”>cappuccino</span> order
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
    • [ ] Clear button aria label - Does this need a dismissLabel prop/slot like chip/alert etc.? - Clear <span lang=“it”>Cappuccino</span> order
  • [ ] Side navigation
    • [ ] status prop - 1 <span lang=“it”>Cappuccino</span>
    • [ ] version prop - If we’re adding a slot for the status, we probably should for version, but probably not for i18n purposes
  • [ ] Skip link
    • [ ] label prop - Skip to <span lang=“it”>Cappuccino</span> orders
  • [ ] Status tag
    • [ ] label prop - 1 <span lang=“it”>Cappuccino</span>
  • [ ] Step
    • [ ] heading prop - <span lang=“it”>cappuccino</span> order step 1
    • [ ] subheading prop - Order your <span lang=“it”>cappuccino</span> here
  • [ ] Switch
    • [ ] label prop - Add more milk to your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
  • [ ] Table of contents
    • [ ] heading prop - <span lang=“it”>Cappuccino</span> order form page
  • [ ] Text field
    • [ ] label prop - What type of milk would you like in your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] placeholder prop - Review your <span lang=“it”>cappuccino</span> order
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
  • [ ] Time input
    • [ ] label prop - What time would you like your <span lang=“it”>cappuccino</span>? - REQUIRES CHANGE TO INPUT LABEL
    • [ ] invalidTimeMessage prop - We do not serve <span lang=“it”>cappuccinos</span> at this time
    • [ ] validationText prop - There was an error ordering your <span lang=“it”>cappuccino</span> - REQUIRES CHANGE TO INPUT VALIDATION
    • [ ] Clear button aria label - Does this need a dismissLabel prop/slot like chip/alert etc.? - Dismiss <span lang=“it”>Cappuccino</span> order time
  • [ ] Toast
    • [ ] heading prop - Thanks for ordering a <span lang=“it”>cappuccino</span>
    • [ ] message prop - Your <span lang=“it”>cappuccino</span> will be with you shortly
  • [ ] Toggle button
    • [ ] label prop - <span lang=“it”>Cappuccino</span> order no. 1
  • [ ] Tooltip
    • [ ] label prop - <span lang=“it”>Cappuccino</span> with extra frothy milk
  • [ ] Top navigation
    • [ ] status prop - 1 <span lang=“it”>Cappuccino</span>
    • [ ] version prop - If we’re adding a slot for the status, we probably should for version, but probably not for i18n purposes

GCHQ-Developer-530 avatar Nov 24 '25 10:11 GCHQ-Developer-530