I have been reading about bootstrap tabs from their official documentation. The markup suggested is as:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
On tabpanels bootstrap doesn't use aria-labelledby attribute. but here in the step 2 they are using aria-labelledby on tabpanel. So my question is:
Should I use aria-controls with aria-labelledby in bootstrap tabs for making it better for screen readers?
Related
Bootstrap: 3.4.1
Jquery: 3.4.1
Site page in question:
http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823
I built a bootstrap feature for a site a couple years ago in the Scalar CMS that is supposed to contain three seperate caroursels in tabs that you can toggle between (essentially there is only supposed to be one carousel on the page at a time depednding on the active tab).
I went back to the site and the tab buttons didn't work and all three carousels were being shown for all the pages using them.
I constructed the tabs in the content area in the Scalar page editer by adding the following html in 'Source' mode (taken from https://getbootstrap.com/docs/3.4/javascript/#markup):
<div class="container">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a aria-controls="narrative" role="tab" data-toggle="pill" href="#menu1">Narrative</a></li>
<li role="presentation"><a aria-controls="claims" role="tab" data-toggle="pill" href="#menu2">Claims</a></li>
<li role="presentation"><a aria-controls="testimonies" role="tab" data-toggle="pill" href="#menu3">Testimonies</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1" role="tabpanel"><a class="inlineWidget inline" data-size="full" data-nodes="the-narrative-of-james-brooks---page-1,the-narrative-of-james-brooks---page-2,the-narrative-of-james-brooks---page-3,the-narrative-of-james-brooks---page-4" data-widget="carousel" data-align="left" data-caption="none" name="scalar-inline-widget"></a>
</div>
<div class="tab-pane fade" id="#menu2" role="tabpanel"><a data-align="center" class="inlineWidget inline" data-size="full" data-widget="carousel" data-nodes="the-claims-of-james-brooks---page-1,the-claims-of-james-brooks---page-2,the-claims-of-james-brooks---page-3" data-caption="none" name="scalar-inline-widget"></a>
</div>
<div role="tabpanel" class="tab-pane fade" id="menu3"><a data-align="center" class="inlineWidget inline" data-size="full" data-widget="carousel" data-nodes="the-testimonies-for-james-brooks---page-1,the-testimonies-for-james-brooks---page-2,the-testimonies-for-james-brooks---page-3,the-testimonies-for-james-brooks---page-4,the-testimonies-for-james-brooks---page-5,the-testimonies-for-james-brooks---page-6,the-testimonies-for-james-brooks---page-7,the-testimonies-for-james-brooks---page-8,the-testimonies-for-james-brooks---page-9,the-testimonies-for-james-brooks---page-10,the-testimonies-for-james-brooks---page-11,the-testimonies-for-james-brooks---page-12,the-testimonies-for-james-brooks---page-13,the-testimonies-for-james-brooks---page-14" data-caption="none" name="scalar-inline-widget">test</a>
</div>
</div>
</div>
Where I think the issue lies is when I hit 'Save and view' in the editor: the CMS builds the page with a lot more element tags that mess with the nesting of my custom html. For whatever reason, the data in the tab panes (which gets created when you make a carousel in the editer) is getting placed outside the container and into a completely seperate :
<div class="paragraph_wrapper">
<div class="body_copy">
<div class="container">
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a aria-controls="narrative" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu1">Narrative</a></li>
<li role="presentation"><a aria-controls="claims" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu2">Claims</a></li>
<li role="presentation"><a aria-controls="testimonies" role="tab" data-toggle="pill" href="http://ctsdh.org/kroberts/maryland-loyalism-project-redux/the-memorial-of-james-brooks?path=ao12-6&t=1652330938823#menu3">Testimonies</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="menu1" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<!-- outside??? -->
<a class="inlineWidget inline widget_link" data-size="full" data-nodes="the-narrative-of-james-brooks---page-1,the-narrative-of-james-brooks---page-2,the-narrative-of-james-brooks---page-3,the-narrative-of-james-brooks---page-4" data-widget="carousel" data-align="left" data-caption="none" name="scalar-inline-widget" style="display: none;"></a>
<!-- widget for first carousel, duplicated? -->
<div class="widget_slot full_widget widget_carousel left_slot">...</div>
<!-- repeats this pattern for all three carousels -->
In the past, the whole widget element was contained in the right area, but now it assumes this behavior...I have all the bootstrap and jquery files included as well. Maybe there is a way to maipulate the DOM to put all the "widget_slot full_widget widget_carousel left_slot" stuff in the tabs at build time? Any and all suggestions/feedback are much appreciated :)
I am very new to angular 6, I have created tabs in HTML and I need to convert it in angular 6 and also make it dynamic. below is my HTML code-
<ul class="nav nav-tabs side_nav" role="tablist">
<li role="presentation" class="dashboard_li active">
</li>
<li role="presentation" class="dashboard_li">
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane active" id="two"></div>
</div>
I have converted it angular 6, below is my angular code -
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
<a (click)="selectedwallet = coinwallet" aria-controls="one" role="tab" data-toggle="tab"></a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane active" id="two"></div>
</div>
Now I have two pints here -
1- how would I make tab-content dynamic according to tabs
2- Currently tabs are not working, as I am changing from one tab to another tab, tab-content always remain same, it's not changing according to the tab.
Any help would be appreciated. Thanks in advance.
you need to show/hide tab-content using *ngIf angular directive
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
<a (click)="selectedwallet = wallet" aria-controls="one" role="tab" data-toggle="tab">{{wallet}}</a>
</li>
</ul>
<div class="tab-content">
<div *ngIf="selectedwallet === coinwallet[0]" role="tabpanel" class="tab-pane active" id="one">wallet 1 content</div>
<div *ngIf="selectedwallet === coinwallet[1]" role="tabpanel" class="tab-pane active" id="two">wallet 2 content</div>
</div>
.ts:
coinwallet: string[] = ['wallet1','wallet2'];
selectedwallet = this.coinwallet[0];
check working code here
I think rather than converting HTML tabs to Angular, You can directly user ng-bootstrap components which works very well with Angular and comes with lot of configurable options. below is a link for ng-bootstrap tabs
https://ng-bootstrap.github.io/#/components/tabs/examples
I have a problem editing an HTML page. I need to change the content on the second tab on the nav-tabs, the one with the name Anexos. I tried to create a new href, but this didn't work. What do I need to do?
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#adm_carteiras">Formulário</a></li>
<li><a data-toggle="tab" href="#utilizacao">Anexos</a></li>
<li><a data-toggle="tab" href="#utilizacao">Versões</a></li>
</ul>
<div class="tab-content">
<div id="adm_carteiras" class="tab-pane fade in active">
<div class="row">
<div class="col-md-12">
<div class="filtrar_cliente box" style="padding-bottom:25px;">
<div class="box_conteudo">
<div class="box_conteudo">
<h1 class="title_box">Solicitação de Viagem</h1>
<div class="adm_carteiras box">
<div class="box_conteudo">
<h4>Nome do Solicitante:</h4><br>
</div>
</div>
this is the correct bootstrap nav-tabs structure
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
How can I close all Bootstrap tabs at once?
I need to have all tabs closed at start, then use it as usual, but if some tab is open and I click again it will close - same as Bootstrap accordion functionality.
Code is same as on Bootstrap page:
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane in active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Fisrt tab is always open. When I remove active class it doesn't work correctly.
I am using this tabbed menu with twitter bootstrap.
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
I can go to the next tab by clicking on it, I want to find out if i can add a link/button and visit the next tab from the previous tab.
check out my jsfiddle: http://jsfiddle.net/L6bf7nvc/
Be sure to check that you included your jquery.js before your bootstrap.js
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
version: jquery 2.1.0 and bootstrap 3.2.0
According to the Bootstrap Tabs documentation you can do it with Javascript:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab('show');
})
</script>
You need only to create a link to that function, or if using unobtrusive JavaScript, create an event handler catching the 'click' on the link. Check this answer if you need more information about it.
SEE this DEMO
DEMO
js
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a:last').tab('show');