WebAIM - Web Accessibility In Mind

E-mail List Archives

Why does NVDA concatenate React tabs into a single element?

for

From: Mark Magennis
Date: May 18, 2020 10:09AM

--_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_--