library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

A11y: Enhance tabs docs

Browse Source
This commit is contained in:
Muhannad Abdelrazek 2020-07-18 17:24:42 +02:00
parent df8c3bf31d
commit d28342029d
1 changed files with 119 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
docs/documentation/components/tabs.html
View File

@ -16,60 +16,78 @@ meta:
{% capture tabs_example %} {% capture tabs_example %}
<div class="tabs"> <div class="tabs">
<ul> <ul role="tab">
<li class="is-active"><a>Pictures</a></li> <li role="presentation" class="is-active">
<li><a>Music</a></li> <a href="#picture-panel" id="picture-tab"
<li><a>Videos</a></li> role="tab" aria-controls="picture-panel" aria-selected="true">Pictures</a>
<li><a>Documents</a></li> </li>
<li role="presentation">
<a href="#music-panel" id="music-tab"
role="tab" aria-controls="music-panel" aria-selected="false">Music</a>
</li>
<li role="presentation">
<a href="#video-panel" id="video-tab"
role="tab" aria-controls="video-panel" aria-selected="false">Videos</a>
</li>
<li role="presentation">
<a href="#docs-panel" id="docs-tab"
role="tab" aria-controls="docs-panel" aria-selected="false">Documents</a>
</li>
</ul> </ul>
</div> </div>
<section id="picture-panel" role="tabpanel" tabindex="-1" aria-labelledby="picture-tab">Pictures Content</section>
<section id="music-panel" role="tabpanel" tabindex="-1" aria-labelledby="music-tab" class="is-hidden">Music Content</section>
<section id="video-panel" role="tabpanel" tabindex="-1" aria-labelledby="video-tab" class="is-hidden">Videos Content</section>
<section id="docs-panel" role="tabpanel" tabindex="-1" aria-labelledby="docs-tab" class="is-hidden">Documents Content</section>
{% endcapture %} {% endcapture %}
{% capture tabs_centered_example %} {% capture tabs_centered_example %}
<div class="tabs is-centered"> <div class="tabs is-centered">
<ul> <ul role="tab">
<li class="is-active"><a>Pictures</a></li> <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
<li><a>Music</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
<li><a>Videos</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
<li><a>Documents</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
</ul> </ul>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture tabs_right_example %} {% capture tabs_right_example %}
<div class="tabs is-right"> <div class="tabs is-right">
<ul> <ul role="tab">
<li class="is-active"><a>Pictures</a></li> <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
<li><a>Music</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
<li><a>Videos</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
<li><a>Documents</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
</ul> </ul>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture tabs_icons_example %} {% capture tabs_icons_example %}
<div class="tabs is-centered"> <div class="tabs is-centered">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -80,60 +98,60 @@ meta:
{% capture tabs_small_example %} {% capture tabs_small_example %}
<div class="tabs is-small"> <div class="tabs is-small">
<ul> <ul role="tab">
<li class="is-active"><a>Pictures</a></li> <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
<li><a>Music</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
<li><a>Videos</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
<li><a>Documents</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
</ul> </ul>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture tabs_medium_example %} {% capture tabs_medium_example %}
<div class="tabs is-medium"> <div class="tabs is-medium">
<ul> <ul role="tab">
<li class="is-active"><a>Pictures</a></li> <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
<li><a>Music</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
<li><a>Videos</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
<li><a>Documents</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
</ul> </ul>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture tabs_large_example %} {% capture tabs_large_example %}
<div class="tabs is-large"> <div class="tabs is-large">
<ul> <ul role="tab">
<li class="is-active"><a>Pictures</a></li> <li class="is-active"><a role="tab" aria-selected="true" href="#picture-panel">Pictures</a></li>
<li><a>Music</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#music-panel">Music</a></li>
<li><a>Videos</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#video-panel">Videos</a></li>
<li><a>Documents</a></li> <li role="presentation"><a role="tab" aria-selected="false" href="#docs-panel">Documents</a></li>
</ul> </ul>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture tabs_boxed_example %} {% capture tabs_boxed_example %}
<div class="tabs is-boxed"> <div class="tabs is-boxed">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -144,27 +162,27 @@ meta:
{% capture tabs_toggle_example %} {% capture tabs_toggle_example %}
<div class="tabs is-toggle"> <div class="tabs is-toggle">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -175,27 +193,27 @@ meta:
{% capture tabs_toggle_rounded_example %} {% capture tabs_toggle_rounded_example %}
<div class="tabs is-toggle is-toggle-rounded"> <div class="tabs is-toggle is-toggle-rounded">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image"></i></span> <span class="icon is-small"><i class="fas fa-image"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music"></i></span> <span class="icon is-small"><i class="fas fa-music"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film"></i></span> <span class="icon is-small"><i class="fas fa-film"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="fas fa-file-alt"></i></span> <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -206,21 +224,21 @@ meta:
{% capture tabs_fullwidth_example %} {% capture tabs_fullwidth_example %}
<div class="tabs is-fullwidth"> <div class="tabs is-fullwidth">
<ul> <ul role="tab">
<li> <li role="presentation">
<a> <a role="tab" href="#left-panel">
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span> <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span> <span>Left</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" href="#up-panel">
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span> <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>Up</span> <span>Up</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" href="#right-panel">
<span>Right</span> <span>Right</span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span> <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a> </a>
@ -231,27 +249,27 @@ meta:
{% capture tabs_centered_boxed_example %} {% capture tabs_centered_boxed_example %}
<div class="tabs is-centered is-boxed"> <div class="tabs is-centered is-boxed">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -262,27 +280,27 @@ meta:
{% capture tabs_toggle_fullwidth_example %} {% capture tabs_toggle_fullwidth_example %}
<div class="tabs is-toggle is-fullwidth"> <div class="tabs is-toggle is-fullwidth">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -293,27 +311,27 @@ meta:
{% capture tabs_centered_boxed_medium_example %} {% capture tabs_centered_boxed_medium_example %}
<div class="tabs is-centered is-boxed is-medium"> <div class="tabs is-centered is-boxed is-medium">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>
@ -324,27 +342,27 @@ meta:
{% capture tabs_toggle_fullwidth_large_example %} {% capture tabs_toggle_fullwidth_large_example %}
<div class="tabs is-toggle is-fullwidth is-large"> <div class="tabs is-toggle is-fullwidth is-large">
<ul> <ul role="tab">
<li class="is-active"> <li class="is-active">
<a> <a role="tab" aria-selected="true" href="#picture-panel">
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span> <span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span> <span>Pictures</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#music-panel">
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span> <span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span> <span>Music</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#video-panel">
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span> <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span> <span>Videos</span>
</a> </a>
</li> </li>
<li> <li role="presentation">
<a> <a role="tab" aria-selected="false" href="#docs-panel">
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span> <span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span> <span>Documents</span>
</a> </a>