WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: glen walker
Date: May 18, 2020 4:31PM

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/>;
>
> > > > >