E-mail List Archives

Search E-mail List Archives for

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

From: Moore,Michael (Accessibility) (HHSC)
Date: Fri, Jun 24 2016 10:48AM
Subject: multi-level tabpanel
No previous message | Next message →

I am trying to figure out the correct design pattern for a multi-level tabpanel. We have an application using angular where we have a tab panel which is navigated through two rows of horizontal tabs. The tabs in the second row change depending upon which tab in the first row is selected. There are some top level tabs that do not open a second row of tabs.

I think that using a nested list to hold the tablist will work but wanted to know if anyone has done this before and/or has an example of a working model. Bonus points if someone has an angular extension that does this.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

From: Birkir R. Gunnarsson
Date: Fri, Jun 24 2016 1:57PM
Subject: Re: multi-level tabpanel
← Previous message | Next message →

So there is a set of initial tabs, but when you select one of these, a
second set of tabs might appear?
Basically you just put the tablist of subtabs into the tabpanel where
appropriate.
A rough outline of the code would be something like the following:

<ul role="tablist">
<li role="presentation"><a href="#" role="tab" aria-selected="true"
aria-controls="tabp1">Tab 1</a></li>
<li role="presentation"><a href="#" role="tab"
aria-controls="tabp2">Tab 2</a></li>
</ul>
<!-- tabpanel 1, contains its own tablist of sub tabs -->
<div role="tabpanel" id="tabp1">
<!-- list of sub tabs -->
<ul role="tablist">
<li role="presentation"><a href="#" role="tab"
aria-controls="tabp11">Sub tab 1</li>
<li role="presentation"><a href="#" role="tab"
aria-controls="tabp12">Sub tab 2</li>
</ul>
<!-- tabpanel for sutab 1 -->
<div role="tabpanel" id="tabp11">
Some stuff in sub tabpanel 21, which is the inner one.
</div>
<!-- tabpanel for sub tab 2 -->
<div role="tabpanel" class="hidden" id="tab12">
hidden tabpanel for subtab 2</div>

</div> <!-- tabpanel 1 ends -->

<div role="tabpanel id="tabp2">
something
</div>



On 6/24/16, Moore,Michael (Accessibility) (HHSC)
< = EMAIL ADDRESS REMOVED = > wrote:
> I am trying to figure out the correct design pattern for a multi-level
> tabpanel. We have an application using angular where we have a tab panel
> which is navigated through two rows of horizontal tabs. The tabs in the
> second row change depending upon which tab in the first row is selected.
> There are some top level tabs that do not open a second row of tabs.
>
> I think that using a nested list to hold the tablist will work but wanted to
> know if anyone has done this before and/or has an example of a working
> model. Bonus points if someone has an angular extension that does this.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> > > > >


--
Work hard. Have fun. Make history.

From: Moore,Michael (Accessibility) (HHSC)
Date: Fri, Jun 24 2016 2:48PM
Subject: Re: multi-level tabpanel
← Previous message | Next message →

Thank you Birkir,

This makes perfect sense. You just saved me from running down the wrong path.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

From: Bryan Garaventa
Date: Fri, Jun 24 2016 3:28PM
Subject: Re: multi-level tabpanel
← Previous message | No next message

Technically aria-level is supported on role="tablist". We really should get support for that into browsers and ATs.


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com