WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Why does NVDA concatenate React tabs into a single element?

for

From: Jonathan Cohn
Date: May 18, 2020 7:50PM

This is called screen layout mode and can be adjusted in the Browse mode settings. JAWS also has a setting that is more likely to keep multiple object on the same line as a single phrase, though the default between NVDA and Jaws are different.

> On May 18, 2020, at 6:31 PM, glen walker < <EMAIL REMOVED> > wrote:
>
> display: inline-block
>
> The following example is read the same way, all elements are read at the
> same time when using the down arrow with NVDA.
>
> <style>
> li {display:inline-block;}
> </style>
>
> <ul>
> <li>alpha</li>
> <li>beta</li>
> <li>gamma</li>
> </ul>
>
> I get similar behavior with other elements when using the down arrow with
> NVDA. Several elements are read at the same time. I guess this is
> expected behavior. I've heard it before but just ignored it. I knew there
> was a reason but didn't have enough incentive to look it up.
>
> <button>alpha</button>
> <br>
> <button>beta</button>
> <button>gamma</button>
> <br>
>
> The alpha button is read by itself but the beta and gamma buttons are read
> as one line when using the down arrow. The buttons are essentially inline,
> just like the list items when using inline-block.
>
> I don't think it's a problem in your scenario. I can tab (key) to the tab
> widget and use the left/right arrow keys with NVDA running and it switches
> tabs. The fact that it reads all the tabs as one line when using the down
> arrow is ok.
>
>
> On Mon, May 18, 2020 at 10:09 AM Mark Magennis < <EMAIL REMOVED> >
> wrote:
>
>> Dear all,
>>
>> I have a problem with a tab bar . If I arrow into it using NVDA/Firefox
>> the three tabs are read as a single element. It seems to be related to a
>> class="react-tabs__tab" on the <li role="tab"> because the addition of that
>> class seems to cause Firefox to remove one of the listitem's children from
>> the accessibility tree. In a tab bar without this class, each tab node has
>> two children - a statictext bullet and a text leaf containing the text of
>> the list item. NVDA reads each tab as a separate element. But the addition
>> of class="react-tabs__tab" to the <li role="listitem"> seems to cause
>> Firefox to remove the bullet from the tree and NVDA concatenates all tabs
>> into one element. The class definition is:
>>
>> :global(.react-tabs__tab) {
>> position: relative;
>> display: inline-block; /* Include border-bottom width */
>> padding: var(--space16) var(--space24) calc(var(--space16) - 5px)
>> var(--space24);
>> font-size: var(--font18);
>> font-weight: 700;
>> color: var(--lightNeutralColor);
>> text-transform: uppercase;
>> letter-spacing: 0.5px;
>> list-style: none;
>> cursor: pointer;
>> outline: 1px solid transparent;
>> }
>> Disabling list-style or display has no effect.
>>
>> I've looked at this in Chrome and I see that it removes the bullet child
>> from a listitem in the accessibility tree when you add the tab role to the
>> <li>s, but NVDA still reads the tabs as separate elements, so it doesn't
>> seem to be just the existence of that bullet.
>>
>> At this point I'm a bit stumped. Can anyone suggest a possible solution or
>> further avenue for investigation?
>>
>> If you want to see the full source, you can access Skillsoft's whole
>> eLearning library for free for 60 days during Covid-19. Go to
>> skillsoft.com, follow the Free Access link, fill in your name, email, and
>> company name and select Get Access. You'll get an email with a link for
>> setting a password and logging in. Once you are in, and have got past the
>> short onboarding where you get to select your areas of interest, tab to any
>> course on the home page and launch it. Arrow down to the tab bar containing
>> Content, Overview and Resources tabs and see what happens.
>>
>> I appreciate any help anyone can give me on this.
>>
>> Mark
>>
>> Mark Magennis
>> Skillsoft | mobile: +353 87 60 60 162
>> Accessibility Specialist
>> [cid:image001.jpg@01D62D31.80FA67F0]<http://www.skillsoft.com/>;
>>
>> >> >> >> >>
> > > >