WCAG: Screen reader reads content before opening the helptext

[Febakke]

Description of the bug

When testing with screen reader i saw some weird behavior on our help text component. If they contain links they would read out the content before opening the helptext. It also read out the entire the URL... (read the raw HTML/markdown)

I couldnt recreate it so i might remember wrong. But i also think it sometimes read it when the field had focus.

We will need to test this some more. I tested it on VoiceOver/Chrome. We should also test it with NVDA or JAWS.

Update based on UU test by SSB The helptext is added inside the label tag. This is not allowed.

• You can not add a button inside a span-element
• You can not add a button to a label-element

This is probably why we get the issues mentioned above.

Steps To Reproduce

1. Go to an app with helptext that contain links
2. Try to use the screen reader.

Additional Information

No response

[bjosttveit]

I can not reproduce the URL behavior now, but I think we use a new HelpText component from the design system now. Having the help text inside of the label still seems to be an issue, as voiceover will read out the screen reader content for the help-text button (not the content inside the dialog) when focusing on the field.

An issue with the help text now seems to be that it will never read the content when opening the help text. This is also the case in storybook so I dont think this is related to the help text being inside of a label, but maybe an issue with the design system component?

If you include a link inside the help text content it is possible to focus on the link, in my case this resulted in voiceover reading the text up to and including the link when focusing on it, but not reading the rest of the content.

[Febakke]

Been a while since i looked at this so my memory is a little hazy. But the issue was not that whole URL is read, it was that the text was read before it opened. And when it read the raw URL it made the issue worse. If the content of the helptext is no longer read when it gets focus then the main issue here is fixed.

A little sidenote on the behavior of the helptext The Helptext button should have an aria-expanded telling screen readers that there are content that will be triggered when they press it. When it is opened they can move down to text inside the popover. This how we want this component to work.

To read the text inside the popover with a screen reader you need to move inside the popover. If you are using VoiceOver you do this by pressing control + option + arrow right. There are no focusable elements inside the popover so focus should not be moved there when using tab (If there are buttons or links inside the popover, focus should move to them when using tab)

Concerning the comments from SSB, it is bad practice to add interactive elements inside a label and it can give accessibility issues. I would consider fixing this. Source

[bjosttveit]

Okay, that seems to work as expected 👍

[adamhaeger]

Okay, that seems to work as expected 👍

@bjosttveit What do you mean here? Is the issue no longer relevant or do you have suggestions for what we should do?

[bjosttveit]

I meant that reading the content of the help text popover works as expected, and this:

When testing with screen reader i saw some weird behavior on our help text component. If they contain links they would read out the content before opening the helptext.

is no longer an issue

However, this:

Update based on UU test by SSB The helptext is added inside the label tag. This is not allowed.

is still an issue. I am not sure how we solve this though.

[paal2707]

This is blocked. Depending on updated designsystem version: #2600

[olavflar]

This is blocked. Depending on updated designsystem version: #2600

Is this still blocked?