E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: multi-level tabpanel

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>

<div role="tabpanel" id="tabp1">

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

<div role="tabpanel" id="tabp11">
Some stuff in sub tabpanel 21, which is the inner one.
</div>

<div role="tabpanel" class="hidden" id="tab12">
hidden tabpanel for subtab 2</div>

</div> 

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, June 24, 2016 2:58 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] multi-level tabpanel

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>
 <div role="tabpanel" id="tabp1">

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

<div role="tabpanel" id="tabp11">
Some stuff in sub tabpanel 21, which is the inner one.
</div>

<div role="tabpanel" class="hidden" id="tab12"> hidden tabpanel for subtab 2</div>

</div> 

<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)
>
> > > archives at http://webaim.org/discussion/archives
> >

--
Work hard. Have fun. Make history.

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, June 24, 2016 12:58 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] multi-level tabpanel

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>
 <div role="tabpanel" id="tabp1">

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

<div role="tabpanel" id="tabp11">
Some stuff in sub tabpanel 21, which is the inner one.
</div>

<div role="tabpanel" class="hidden" id="tab12"> hidden tabpanel for subtab 2</div>

</div> 

<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)
>
> > > archives at http://webaim.org/discussion/archives
> >

--
Work hard. Have fun. Make history.