LG-9423: Radio buttons are not read correctly by assistive technology when reading with the arrow keys

[jmdembe]

🎫 Ticket

LG-9423

🛠 Summary of changes

This ticket fixes a bug. When a user interacts with the radio buttons with a screen reader, radio buttons are not being read in their correct language. Now, if a user decides to use the arrow keys to navigate through the input elements, they are now read in their set language.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

Pre-requisites:

macOS

• VoiceOver
• Chrome
• Safari

Windows

• JAWS
• Chrome
• Firefox (optional)

For testing on a virtual machine, follow the README instructions for setting up your testing and development environment

👀 Screenshots

Screen recordings tested using VO with Chrome on macOS and JAWS with Chrome on a Windows virtual environment

Before:

LG-9423.JAWS.before.mov

before.VO.LG-9423.mov

After:

LG-9423.VO.after.mov

after.LG-9423.JAWS.mov

Notes

• The ticket briefly mentions that an expected behavior should be "Language is read once in the native voice." Since this AC was not a part of the original description, this will be discussed in LG-9949.
• It may be worth looking through other form interactive elements to see if they also have the same current behavior.

[aduth]

We have lang above on line 28 as well. Do we need both?

[jmdembe]

Line 32 puts the attribute on the element while 28 puts it on the <span> attribute itself. Right now, if a user activates the read-all feature, it will read both the input and the text in the set languages.

The fact that this is happening should be discussed further and that is why I wrote LG-9949. There have been previous discussions on whether or not similar behaviors are priority fixes. So for now, I think we both.

[aduth]

LGTM 👍