github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Apply correct ARIA roles for kuiLocalTabs (#14416)

Browse source 
* Fix kuiLocalTabs roles

* Fix tab roles in doc-viewer

* Apply tab roles to vis editor
This commit is contained in:
Tim Roes 2017-10-12 10:09:09 +02:00 • committed by Tim Roes
parent c107b0aea0
commit b15d12ac23
3 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
View file

@ -9,8 +9,10 @@
></bread-crumbs>
<!-- Tabs. -->
<div data-transclude-slot="bottomRow" class="kuiLocalTabs">
<div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist">
<a
role="tab"
aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
ng-repeat="item in kbnDevToolsApp.devTools"
class="kuiLocalTab"
ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
@ -21,5 +23,5 @@
</div>
</div>
</kbn-top-nav>
<main class="dev-tools__container" ng-transclude></main>
<main class="dev-tools__container" role="tabpanel" ng-transclude></main>
</div>

6
src/ui/public/doc_viewer/doc_viewer.js
View file

@ -21,8 +21,8 @@ uiModules.get('kibana')
template: function ($el) {
const $viewer = $('<div class="doc-viewer">');
$el.append($viewer);
const $tabs = $('<ul class="nav nav-tabs">');
const $content = $('<div class="doc-viewer-content">');
const $tabs = $('<ul class="nav nav-tabs" role="tablist">');
const $content = $('<div class="doc-viewer-content" role="tabpanel">');
$viewer.append($tabs);
$viewer.append($content);
docViews.inOrder.forEach(view => {
@ -30,6 +30,8 @@ uiModules.get('kibana')
`<li
ng-show="docViews['${view.name}'].shouldShow(hit)"
ng-class="{active: mode == '${view.name}'}"
role="tab"
aria-selected="{{mode === '${view.name}'}}"
>
<a
ng-click="mode='${view.name}'"

16
src/ui/public/vis/editors/default/sidebar.html
View file

@ -21,8 +21,13 @@
<div class="container-fluid">
<!-- tabs -->
<ul class="nav navbar-nav">
<li ng-class="{active: sidebar.section == 'data'}" ng-show="sidebar.showData">
<ul class="nav navbar-nav" role="tablist">
<li
role="tab"
aria-selected="{{sidebar.section === 'data'}}"
ng-class="{active: sidebar.section == 'data'}"
ng-show="sidebar.showData"
>
<a
class="vis-editor-subnav-link"
ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'data'}"
@ -34,7 +39,12 @@
</a>
</li>
<li ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-class="{active: sidebar.section == tab.name}">
<li
role="tab"
aria-selected="{{sidebar.section === tab.name}}"
ng-repeat="tab in vis.type.editorConfig.optionTabs"
ng-class="{active: sidebar.section == tab.name}"
>
<a
class="vis-editor-subnav-link"
ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == tab.name}"