Skip to content

Commit

Permalink
Make collapsible-sidebar a11y (Fix elastic#12636)
Browse files Browse the repository at this point in the history
  • Loading branch information
timroes committed Jul 6, 2017
1 parent 5d8f648 commit 60eaa7b
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/core_plugins/kibana/public/discover/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
></filter-bar>
</div>
<div class="row">
<div class="col-md-2 sidebar-container collapsible-sidebar">
<div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar">
<disc-field-chooser
columns="state.columns"
hits="rows"
Expand Down
8 changes: 8 additions & 0 deletions src/ui/public/collapsible_sidebar/collapsible_sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ uiModules
`<button
data-test-subj="collapseSideBarButton"
type="button"
aria-expanded="true"
aria-label="Toggle sidebar"
class="kuiCollapseButton sidebar-collapser"
></button>`
);
// If the collapsable element has an id, also set aria-controls
if ($elem.attr('id')) {
$collapser.attr('aria-controls', $elem.attr('id'));
}
const $icon = $('<span class="kuiIcon fa-chevron-circle-left"></span>');
$collapser.append($icon);
const $siblings = $elem.siblings();
Expand All @@ -39,11 +45,13 @@ uiModules
$elem.removeClass('closed');
$icon.addClass('fa-chevron-circle-left');
$icon.removeClass('fa-chevron-circle-right');
$collapser.attr('aria-expanded', 'true');
} else {
isCollapsed = true;
$elem.addClass('closed');
$icon.removeClass('fa-chevron-circle-left');
$icon.addClass('fa-chevron-circle-right');
$collapser.attr('aria-expanded', 'false');
}

if (hasSingleSibling) {
Expand Down

0 comments on commit 60eaa7b

Please sign in to comment.