E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Mark Magennis
Date: Mon, May 18 2020 10:09AM
Subject: Why does NVDA concatenate React tabs into a single element?
No previous message | Next message →

--_004_BN7PR08MB4196AAB6F75EDA4C54893B23E5B80BN7PR08MB4196namp_
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: quoted-printable

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=
=3D"react-tabs__tab" on the <li role=3D"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 t=
he list item. NVDA reads each tab as a separate element. But the addition =
of class=3D"react-tabs__tab" to the <li role=3D"listitem"> seems to cause F=
irefox to remove the bullet from the tree and NVDA concatenates all tabs in=
to 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(--s=
pace24);
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 fr=
om a listitem in the accessibility tree when you add the tab role to the <l=
i>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 eLearn=
ing library for free for 60 days during Covid-19. Go to skillsoft.com, foll=
ow the Free Access link, fill in your name, email, and company name and sel=
ect 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 y=
ou 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/>;


--_004_BN7PR08MB4196AAB6F75EDA4C54893B23E5B80BN7PR08MB4196namp_
Content-Type: image/jpeg; name="image001.jpg"
Content-Description: image001.jpg
Content-Disposition: inline; filename="image001.jpg"; size=1497;
creation-date="Mon, 18 May 2020 16:09:40 GMT";
modification-date="Mon, 18 May 2020 16:09:40 GMT"
Content-ID: <image001.jpg@01D62D31.80FA67F0>
Content-Transfer-Encoding: base64

/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIf
IiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7
Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAaAF8DASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA
AAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3
ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm
p6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA
AwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK
U1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3
uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2aqd5
q2n6dcWtveXkUEt4/l26O2DK3HA9TyPzrk9S8a63ceKL7QfDGiQX0unKrXMlzciMEsM4Ud/r/k4n
iu9v9Q1nwBc6npp027bU2ElsZBJtw6DOR64z+NAHqdY58W+HhaXN2dXtRBazeRNIXwEk/umsu08Z
Ta14tbSdBs0urGz4v9QdyERv7iY+8f8APavOPFOpWeo/D/xH9k0i207yNcEb+QT++IJ+Y+/t0oA9
nXV9ObVBpa3kJvTF53kBvn2f3selXK80hkWH43iRzhU0IMT7AiptO8feLNdtTq+i+E4bvSvNKKDe
qs7AHBOOg+lAHotFcd4i8cXdjrkPh3QdHbVdYeISyx+YEjgX1Zv/ANXUetQ6P481I68PD3iPQjpu
pyxNJa7Jg8VxgE7Q3Y8Hufw7gHRal4o0HR7tLTUdXtLW4fBWOWUA4PQn0H1rSkbETMp6KSK8V8JG
/wBX8ceIJ7/wXBqUsl8i3BuLiNjYDJ4G4fNjH8P92rnhnxJ4t/4TrxHs8OTXju8Yms21BQtmOehP
ByPT0oA3fDHjfWtUsbyK5s2lMMEjC/jUBUIUkbh0zx2/KtHwJ4t1TxBGYb7T2YIv/H7GNqMfQj1+
n5CqvjW91LRdR0my0GEeXLHIpso4Q0coyvBUfU812Gj+f/ZVuLmyjsZQmGt4mBWP2GKzje9r7Hr4
l0vY+0jTS59tdVa/Tz+48x8bT+CbnxDdvqo1fQdYgOyO9t4XH2jA4ZcZDDtng8dawNVg17xHoHgq
11ua4iurq/liS5kQiURkoFdh69evUAH3r3kgHGQDjpmjFaHkHl+hQyfDHxuugM0smga0QbOV+TFP
wCCffgfivoa47Uo3/wCEB8WjY2f+Ei6Y9zX0DjNGB6CgDzRXaD40tP5Mkoj0DdsRcs+OwHcmuQ1W
68OQE3vgmfW9H8QvIuNLSFwrMSMgrjHrxkjtivesc570YGc4GfWgDyye8u/A/wAQZ/EmuWMzWGsW
USTXFuhcW0yqoZTjtlT+YxnBp51H/hYnxC0O90a1nGlaIXlmvZYigdjjCrnr90fmfSvUOvBoAAGA
MCgDz74dKw8ZeOSVIB1FcZHXmSsm08QWvgz4peJf7YhukGptCbUxQl/MGO2Pr+hr1fFGASDgZHQ0
AG1SwbAzjAOKWiigD//Z

--_004_BN7PR08MB4196AAB6F75EDA4C54893B23E5B80BN7PR08MB4196namp_--

From: glen walker
Date: Mon, May 18 2020 4:31PM
Subject: Re: Why does NVDA concatenate React tabs into a single element?
← Previous message | Next message →

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

From: Jonathan Cohn
Date: Mon, May 18 2020 7:50PM
Subject: Re: Why does NVDA concatenate React tabs into a single element?
← Previous message | Next message →

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

From: Murphy, Sean
Date: Mon, May 18 2020 8:00PM
Subject: Re: Why does NVDA concatenate React tabs into a single element?
← Previous message | Next message →

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

From: Mark Magennis
Date: Tue, May 19 2020 12:50PM
Subject: Re: [EXTERNAL]Why does NVDA concatenate React tabs into a single element?
← Previous message | Next message →

So I guess what you're all saying is, this is the way NVDA works with this CSS and users can cope with it and get around it? It seems avoidable though and I do think it would be preferable if this didn't happen. I'll talk to my devs and see if they can use alternative CSS.

Thanks guys.

MArk

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist

From: Steve Green
Date: Tue, May 19 2020 1:06PM
Subject: Re: [EXTERNAL]Why does NVDA concatenate React tabs into a single element?
← Previous message | Next message →

I wouldn't worry about it. NVDA has the same behaviour for all horizontal lists, so people who use NVDA will encounter it with the main menu on pretty much very website they visit. They may even consider it strange if your menu does not behave this way.

WCAG does not say anything about how screen readers should behave, so it's not going to be a WCAG non-conformance. We all have opinions, but user testing is the only way to know if it's really a problem that needs to be fixed.

Steve Green
Managing Director
Test Partners Ltd

From: glen walker
Date: Tue, May 19 2020 2:23PM
Subject: Re: [EXTERNAL]Why does NVDA concatenate React tabs into a single element?
← Previous message | Next message →

Thanks, Jonathan. I couldn't remember the exact term that NVDA used.
"Screen layout" mode. I can toggle that with NVDA+v and can hear the
difference when arrowing up/down and hear each list item separately.

But I agree with others that nothing needs to be done to "fix" the page.

From: Jonathan Cohn
Date: Wed, May 20 2020 11:25AM
Subject: Re: [EXTERNAL]Why does NVDA concatenate React tabs into a single element?
← Previous message | No next message

If you don't want to listen to us about if this is how NVDA users expect your layout, then please join the nvda group at groups.io <http://groups.io/>; and ask them to review the patterns you are looking into and if they feel they understand what you are attempting to do.
There are over 1300 NVDA users on that list some of whom are quite vocal.
Jonathan


> On May 19, 2020, at 2:50 PM, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
>
> So I guess what you're all saying is, this is the way NVDA works with this CSS and users can cope with it and get around it? It seems avoidable though and I do think it would be preferable if this didn't happen. I'll talk to my devs and see if they can use alternative CSS.
>
> Thanks guys.
>
> MArk
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
>