WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WebAIM-Forum Digest, Vol 182, Issue 21

for

From: Shannon Urban
Date: May 20, 2020 9:47AM

Re: Tab panels not reading on Android '

@Joe Humbert - Chrome on Android devices.



On Tue, May 19, 2020 at 1:00 PM < <EMAIL REMOVED> >
wrote:

> Send WebAIM-Forum mailing list submissions to
> <EMAIL REMOVED>
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://list.webaim.org/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> <EMAIL REMOVED>
>
> You can reach the person managing the list at
> <EMAIL REMOVED>
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. Re: Why does NVDA concatenate React tabs into a single
> element? (glen walker)
> 2. Re: Why does NVDA concatenate React tabs into a single
> element? (Jonathan Cohn)
> 3. Re: Why does NVDA concatenate React tabs into a single
> element? (Murphy, Sean)
> 4. Tab panels not reading on Android (Shannon Urban)
> 5. Re: Tab panels not reading on Android ( <EMAIL REMOVED> )
>
>
>
> ---------- Forwarded message ----------
> From: glen walker < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Mon, 18 May 2020 16:31:38 -0600
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
> 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/>;
> >
> > > > > > > > > >
>
>
>
>
> ---------- Forwarded message ----------
> From: Jonathan Cohn < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Mon, 18 May 2020 21:50:52 -0400
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
> 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/>;
> >>
> >> > >> > >> > >> > >>
> > > > > > > > >
>
>
>
>
> ---------- Forwarded message ----------
> From: "Murphy, Sean" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Tue, 19 May 2020 02:00:24 +0000
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
> 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
>
>