NVDA omits space between blocks of text

[annapmeyer]

Steps to reproduce:

Open the attached HTML in Firefox.
example.zip

Our page has a series of buttons (implemented as a links). Each button has the same text printed on it. It's obvious visually that each one will perform the given action for a specific set of information, so sighted users don't need more info. However, we have a hidden element nested within the element to provide additional context to screenreaders about what clicking each particular button will do.

Actual behavior:

NVDA concatenates the last word in the button text and the first word in the span. So, if the button says "Click me" and the help text is "then see what happens!," NVDA will read "Click methan see what happens."

Expected behavior:

NVDA should leave the space between the two words: "Click me then see what happens." This is the behavior on Chrome. It doesn't seem like it's a Firefox bug, though, because the Firefox accessibility tree is constructed correctly, with a space between the two phrases.

System configuration

NVDA installed/portable/running from source:

Installed

NVDA version:

2018.3.2

Windows version:

Windows 10 Enterprise

Name and version of other software in use when reproducing the issue:

Firefox 69.0

Other information about your system:

Other questions

Does the issue still occur after restarting your PC?

Yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

N/A

[Adriani90]

Cc: @jcsteh

[jcsteh]

Can't reproduce with your test case and multiple versions of Firefox. For me, NVDA reads:

link CLICK ME THEN SEE WHAT HAPPENS!

[jcsteh]

Oops, didn't mean to close. 😳 Can anyone else reproduce this?

[Adriani90]

Sorry I missed the NVDA version from the issue description.
@ameyer95 could you test this please with last NVDA alpha version? You can find it here:
https://www.nvaccess.org/files/nvda/snapshots/

I cannot reproduce this issue in Firefox 69 with NVDA alpha-18604,e295dbdd.

[peterquale]

@ameyer95, I get the same result with Chrome and NVDA. My output is "methan". (Firefox does not share this issue.)

I see many similar issues any time a sentence or other line of related text within a block level element is split with another HTML element. Most often, it is a SPAN tag that perhaps makes part of the text visually hidden, or maybe a word in a sentence is a different color. As in this example, NVDA with Chrome will output "account menu forpeter", and placement of space character anywhere in the mix of spans makes no difference.

<button id="account" aria-expanded="false" aria-controls="account-menu" data-menu="account">
    <span class="sr-only">account menu for </span> <span class="account"> Peter</span>
</button>

My first guess was that NVDA strips spaces around content in any element styled as display:block, especially if that block is within another element styled as display:block. And then perhaps NVDA does not strip spaces when an element is styled as display:inline. But, I can find no particular pattern to the missing space characters.

The lightest solution I've found is adding a before or after pseudo-class to one or more of the spans and declare content:" ", which works fine. An aria-label also works but it seems like somebody would have a good reason for this before I start patching with ARIA.

Thanks all.

[Adriani90]

This works correctly now with NVDA alpha-20220,1c4519a6, Chrome 83, Microsoft Edge Chromium 83 and Firefox 76. Also the example provided by @peterquale works properly now. Closing as works for me.

[Adriani90]

Sorry, was too fast on this. It seems the issue in the attachment still persists in Chrome 83. Reopening.

[Adriani90]

It seems Edge Chromium 83 is also impacted by this.

cc: @aleventhal

[ObjectInSpace]

Filed https://crbug.com/1088063. Thanks!