Internal issue 3127 - level A and level AA language indication

[ticket-sync[bot]]

In order to meet level A and level AA language indication, we need to be able to include a lang attribute where an English word appears in non-English text. I am currently using i18n to implement these, however in the label of a checkbox, ~~the value or an IcSelect~~ and the placeholder text in a text field I am unable to amend the text.

Its important to note, I don't need to wrap the whole sentence, just a specific word.

See internal ticket for more info

UPDATE: Crossed out the IcSelect bit ^ as the customer no longer needs this change. So the ticket is just about updating the placeholder in a text field and the label of a checkbox

Scope of this ticket:

• [ ] Label of Checkbox
• [ ] Placeholder on text-field

[GCHQ-Developer-847]

Marked as high urgency - the customer needs this done by the end of November

[GCHQ-Developer-847]

My initial thought is that we should use slots (but happy to discuss).

So if we're creating a slot for both the label on an ic-checkbox and the placeholder on an ic-text-field, I think it would be good to provide slots for the following as well, for consistency:

• The label on an ic-radio-option
• The placeholder on an ic-select (single, searchable and multi)
• The placeholder on an ic-search-bar

Considering the urgency of this ticket, maybe open a PR with just the checkbox and text field changes first, so we can get them included in a release as soon as possible. And then open another PR for the rest after. But up to whoever picks this up

[GCHQ-Developer-847]

Check that the screen reader behaviour works correctly, e.g. it reads out the slotted label when the checkbox is focused, and the slotted placeholder when the text field is focused.

Note: If you're trying to test the lang attribute, it may not work with VoiceOver (i.e. it may not read out words in the specified accent). Apparently (according to Copilot), VoiceOver is known to ignore inline lang attributes. For example, it won't read the words with lang="en" in this StackBlitz in an English accent

^ So it might be best to get someone who has NVDA to test this (although not sure if they need extra settings turning on for it to work?)

[GCHQ-Developer-847]

We decided in backlog refinement that it's best to just focus on the two specific bits of text the customer needs this fix for - so that it can implemented quickly. The others mentioned in my comment above can be done as part of #4060 instead

[GCHQ-Developer-299]

There are some issues in trying to address this ticket:

• [checkbox] Slotted labels don't read in their set language when user tabs onto the checkbox. However, you can ctrl+option over them and they will read correctly. I'm gonna see if a 'lang' prop on the checkbox itself will change this
• [textfield] placeholder text does not read in set language, even if the language of the field is set. (text entered into the field will read in french if 'fr' is set as lang, but the placeholder still reads in system language)

I think there's limits to how much we can do here

[GCHQ-Developer-299]

I've found that you can change the language of individual checkboxes (or textfields for that matter) by wrapping them in a <span lang="xx">. i'm still gonna implement slotted labels - currently struggling with getting embedded elements (e.g. a status tag) to read to screenreaders.

I really don't think placeholders can be changed though. Might have to go back to the customer with an explanation and apology there.

[GCHQ-Developer-847]

Thanks @GCHQ-Developer-299 - I have gone back to the customer to explain the issues with the placeholder, and asked if the placeholder fix is essential (e.g. maybe the placeholder could be reworded, or extra information could be added to the helper text instead). Just waiting to hear back :)

[GCHQ-Developer-847]

The customer is happy for us to leave the placeholder. They think they should be able to use helper text instead (luckily we already have a slot for helper text so they can add lang attributes in there if needed!)

[GCHQ-Developer-299]

Thanks for getting in touch with them @GCHQ-Developer-847 - i'll aim to get the checkbox label slot branch sorted out this sprint, and ideally a separate PR with storybook examples of changing overall language on some components.