WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Murphy, Sean
Date: May 18, 2020 8:00PM

Thanks for this, as I was going to outline the same. Each screen reader has slight differences in this space on the different platforms.

Sean Murphy | Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917
Digital Systems Launch Page
Accessibility Single source of Truth

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jonathan Cohn
Sent: Tuesday, 19 May 2020 11:51 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single element?

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

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
> 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/>;
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives