People have asked the difference between aria-controls vs aria-owns. The aria-controls is intended parent child relationships based on hierarchy and aria-owns is not.
I want to get very specific. What exactly does aria-controls do that aria-owns does not.
From the Aria Authoring Practices document:
Two relationships expand the logical structure of a WAI-ARIA Web application. These are aria-owns and aria-controls . The aria-owns relationship completes the parent/child relationship when it cannot be completely determined from the DOM created from the parsing of the markup. The aria-controls relationship defines a cause-and-effect relationship so that assistive technologies may navigate to content effected by and changes to the content where the user is operating.
So what that means in practice is that if you have a tab control with a tab panel. The tablist must own the tabs and the tabs control their respective tab panels. The tabs are expected to live hierarchically as children of the tablist and if they do not, then you must use aria-owns to point to them.
The tab panels can live wherever you want but you should point to them from the tabs (using aria-controls) so the assistive technology can find them and expose them to the user (with keyboard shortcuts for example)
Example of tabs from the Open Ajax Alliance tab panel example
<ul class="tablist" role="tablist">
<li id="tab1" class="tab selected" aria-controls="panel1" aria-selected="true" role="tab" tabindex="0">Crust</li>
<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="-1">Veggies</li>
<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="-1">Carnivore</li>
<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="-1">Delivery</li>
</ul>
<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false" style="display: block;">
</div>
<div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
That markup has the required hierarchical relationship between the tablist and the tabs as well as the semantic markup of the fact that each tab controls its respective tabpanel.
The markup could have been done like this (I have omitted the required aria-setsize that would make up for the replacement of the <ul> for brevity)
<div class="tablist" role="tablist" aria-owns="tab1 tab2 tab3 tab4"></div>
<div id="tab1" class="tab selected" aria-controls="panel1" aria-selected="true" role="tab" tabindex="0">Crust</div>
<div id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="-1">Veggies</div>
<div id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="-1">Carnivore</div>
<div id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="-1">Delivery</div>
<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false" style="display: block;">
</div>
<div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
<div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true" style="display: none;">
</div>
Related
I have a bootstrap breadcrumb element with a page header on the same row which works fine on large monitors but on mobile the header covers the breadcrumb. How do I force the header to a new row for smaller screens?
<div class="card">
<div class="card-body d-lg-flex align-items-center">
<nav class="mb-3 mb-lg-0">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">This Page</li>
</ol>
</nav>
</div>
<div class="align-self-end align-self-md-center center-y">
<asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
</div>
</div>
You can use Bootstrap's grid system to force the header to a new row on smaller screens. One way to achieve this is to wrap the breadcrumb and the header in separate div elements with the class of row, and then give each div a class of col-lg-* and col-md-* for the larger screens and col-* for smaller screens. For example:
<div class="card">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<nav class="mb-3 mb-lg-0">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">This Page</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
</div>
</div>
</div>
This way on larger screens the breadcrumb and header will be on the same line, but on smaller screens the header will be on a new row, thus avoiding the overlap.
How can I achieve fixed tabs using angular and bootstrap :
Here is my code:
<div #header>
<div *ngIf="loaded; else loading">
<ul ngbNav #nav="ngbNav" [(activeId)]="selectedTab" [destroyOnHide]="false" class="nav-pnb-tabs nav-tabs">
<li [ngbNavItem]="'dashboard'">
<a ngbNavLink>Dashboard</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<dashboard></dashboard>
</div>
</ng-template>
</li>
<li [ngbNavItem]="'policyList'">
<a ngbNavLink>Policy List</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<policy-list></p-policy-list>
</div>
</ng-template>
</li>
<li class="nav-item" [ngbNavItem]="'policysearch'">
<a ngbNavLink>Search</a>
<ng-template ngbNavContent>
<div class="container-fluid" style="margin-top: 50px;">
<policy-search></policy-search>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
</div>
</div>
I have to keep my tabs fixed while scrolling the content:
When I use: style="position:fixed; width:100%" it is not scrolling the content also.
If I used overflow:scroll on the content div, it is asking for height which if I set it, then my content inside scroll is getting cut after the certain height is reached.
Can you please help me how to achieve Fixed tabs using angular powered with bootstrap?
Thanks.
I'm trying to customise a tab menu in bootstrap so that when a link is selected (active) it is highlighted in a coloured box. I can't seem to target the active element in css. Can someone advice how I need to do this? The html is as follows:
<div class="col col-md-3">
<div class="nav flex-column nav-pills" id="servicesTab" aria-orientation="vertical">
<a class="nav-link nav-pill-custom active" id="v-pills-orientation-tab" data-toggle="pill" href="#v-pills-orientation" role="tab" aria-controls="v-pills-orientation" aria-selected="true">Orientation</a>
<a class="nav-link nav-pill-custom" id="v-pills-education-tab" data-toggle="pill" href="#v-pills-education" role="tab" aria-controls="v-pills-education" aria-selected="false">Education</a>
<a class="nav-link nav-pill-custom" id="v-pills-investigation-tab" data-toggle="pill" href="#v-pills-investigation" role="tab" aria-controls="v-pills-investigation" aria-selected="false">Investigation</a>
</div>
</div>
These link to some tabs on the same page:
<div class="col col-md-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- ORIENTATION TAB-->
<div class="tab-pane fade show active" id="v-pills-orientation" role="tabpanel" aria-labelledby="v-pills-orientation-tab">
<p>...</p>
</div>
<!-- EDUCATION TAB-->
<div class="tab-pane fade" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab">
<p>...</p>
</div>
</div>
</div>
Then the css for the nav-pill-custom class is given as follows.
.nav-pill-custom {
outline:none !important;
color: #6481A6;
}
.nav-pill-custom:hover {
background-color:#91cbeb;
border: #91cbeb;
}
.nav-pill-custom:focus,
.nav-pill-custom:active
{
background-color:#91cbeb;
border: #91cbeb;
}
Each of rthe css blocks works fine apart form the one for targeting the active link. I've also tried it without .nav-pill-custom:focus and I've tried it adding in .nav-pill-custom:active a targeting the anchor, which was a solution in another stackoverflow question but it doesnt seem to be working for me. How do I make this work?
I am trying to place in the correct order the mega menu for every screen or at least for the most common pc / laptop screens, but however, it looks like this. I am using twitter bootstrap 4 for this task
I want to keep the mega menu below the dropdown carpet without getting out of place
<li class="header__el open">
<a href="#" class="header__link dropdown-toggle" data-toggle="dropdown"
aria-expanded="true">header__link<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row" x-placement="bottom-start"
style="position: absolute;will-change: transform;top: 3rem;left: 10rem;margin: 1em;margin-left: 37%;transform: translate3d(23px, 22px, 0px);">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="nav-group" style="margin-bottom:10px; border-bottom:none;">
<a href="#solutions-zero-trust-security?hsLang=en">
<h4>Zero Trust</h4>
</a>
<ul class="list-items space-0">
<li>Operationalize Zero Trust</li>
</ul>
</div>
<div class="nav-group" style="border-bottom:none;">
<h4>Industries</h4>
<ul class="list-items space-0">
<li>Financial Institutions</li>
<li>Law Firms</li>
<li>Retail/PCI</li>
<li>Federal</li>
<li>Airlines</li>
<li>Healthcare</li>
</ul>
</div>
</div>
<div class="col-sm-4" style="padding-right:0px;">
<div class="nav-group" style="border-bottom:none;">
<h4>Compliance & Risk</h4>
<ul class="list-items space-0">
<li>SWIFT</li>
<li>PCI</li>
</ul>
</div>
<div class="nav-group" style="border-bottom:none;">
<h4>Cloud</h4>
<ul class="list-items space-0">
<li>Amazon Web Services</li>
<li>Microsoft Azure</li>
<li>Google Cloud Platform</li>
<li>OpenStack</li>
<li>Multi-Cloud</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="nav-group">
<h4>Initiatives</h4>
<ul class="list-items space-0">
<li>Container Segmentation</li>
<li>Environmental Separation</li>
<li>Application Segmentation</li>
<li>Securing Application Migration</li>
<li>User Segmentation</li>
<li>Encrypting Data in Motion</li>
<li>Securing Microsoft Applications</li>
<li>Secure a New Data Center</li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</li>
My dropkick look strange - http://i.imgur.com/0itAA.png
Container is bigger, than dropdown list.
My html:
<div class="text_over_field">
<b>Your language preferences</b>
<b>This is language you would like Print-it-Green service to be displayed in</b>
</div>
<div class="field">
<div class="dk_container dk_theme_default" id="dk_container_color" tabindex="7" style="display: block; ">
<a class="dk_toggle" style="width: 149px; ">
<span class="dk_label">English</span></a>
<div class="dk_options" style="top: 29px; ">
<ul class="dk_options_inner">
<li class="dk_option_current"><a data-dk-dropdown-value="">English</a></li>
<li class=""><a data-dk-dropdown-value="#E15A01">Israeli</a></li>
<li class=""><a data-dk-dropdown-value="#604A42">Ukrainian</a></li>
</ul>
</div>
</div>
</div>
<div class="submit" >
</div>
Check the CSS markup
Check the HTML markup
All is wrapped in form_for_new class.
Also, it crashed my form.
What you can say about it ?