Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

11851 a11y discover field chooser headers (rebased version) #12211

Merged
merged 4 commits into from
Jun 6, 2017
Merged

11851 a11y discover field chooser headers (rebased version) #12211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d63e7b
Discovery heading refactor and a11y tabbing
aphelionz May 26, 2017
2ce7c3c
CSS Changes based on @cjcenizal's feedback
aphelionz Jun 4, 2017
959b87f
Updating docs examples
aphelionz Jun 6, 2017
7233855
adding font-weight: normal
aphelionz Jun 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,17 @@
</div>
<div ng-hide="indexPatternList.length > 1">
<div class="index-pattern">
<div css-truncate>{{ indexPattern.id }}</div>
<h2
class="index-pattern-label"
id="index_pattern_id"
tabindex="0"
css-truncate
>{{ indexPattern.id }}</h2>
</div>
</div>

<div class="sidebar-list-header">
<h5>Selected Fields</h5>
<h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">Selected Fields</h3>
</div>
<ul class="list-unstyled discover-selected-fields" >
<discover-field
Expand All @@ -36,7 +41,7 @@ <h5>Selected Fields</h5>
</ul>

<div class="sidebar-list-header sidebar-item">
<h5>Available Fields
<h3 class="sidebar-list-header-label" id="available_fields" tabindex="0">Available Fields
<span
ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
ng-click="showFields = !showFields"
Expand All @@ -55,7 +60,7 @@ <h5>Available Fields
>
<span aria-hidden="true" class="kuiIcon fa-gear"></span>
</button>
</h5>
</h3>
</div>

<div class="sidebar-item" ng-show="showFilter">
Expand Down
6 changes: 3 additions & 3 deletions src/core_plugins/kibana/public/discover/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
<div data-transclude-slots>
<!-- Breadcrumbs. -->
<div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
<span ng-show="opts.savedSearch.id" class="kuiLocalBreadcrumb__emphasis">
<span data-test-subj="discoverCurrentQuery" ng-bind="opts.savedSearch.lastSavedTitle"></span>
<i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
<i id="reload_saved_search" tabindex="0" aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
</span>
<span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
<ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
</div>
</h1>
</div>

<!-- Search. -->
Expand Down
11 changes: 11 additions & 0 deletions src/ui/public/styles/sidebar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@
color: @sidebar-header-color;
border: 1px solid;
border-color: @sidebar-header-border;

.sidebar-list-header-label {
font-size: 14px;
}
}

.index-pattern {
Expand All @@ -86,6 +90,13 @@
background-color: @kibanaGray4;
line-height: 28px;

.index-pattern-label {
font-size: 14px;
font-weight: bold;
margin: 0;
line-height: 28px;
}

> * {
flex: 0 1 auto;
align-self: center;
Expand Down
4 changes: 4 additions & 0 deletions ui_framework/components/local_nav/_local_breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
}

.kuiLocalBreadcrumb {
font-size: 14px;
margin: 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add font-weight: normal here to account for the <h1> default styling.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

font-weight: normal;

& + & {
margin-left: 6px;

Expand Down
28 changes: 16 additions & 12 deletions ui_framework/dist/ui_framework.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1486,18 +1486,22 @@ body {
padding-left: 10px;
/* 1 */ }

.kuiLocalBreadcrumb + .kuiLocalBreadcrumb {
margin-left: 6px; }
.kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
content: '/';
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 4px;
color: #5a5a5a; }
.theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
color: #a5a5a5; }
.kuiLocalBreadcrumb {
font-size: 14px;
margin: 0;
font-weight: normal; }
.kuiLocalBreadcrumb + .kuiLocalBreadcrumb {
margin-left: 6px; }
.kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
content: '/';
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 4px;
color: #5a5a5a; }
.theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
color: #a5a5a5; }

/**
* 1. Make it a bit darker to contrast with the gray background.
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export function LocalNavWithBreadcrumbs() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export function LocalNavWithDropdown() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export function LocalNavWithDropdownPanels() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export function LocalNavWithMenuItemStates() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export function LocalNavWithSearch() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_search_error.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export function LocalNavWithSearchError() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down
8 changes: 4 additions & 4 deletions ui_framework/doc_site/src/views/local_nav/local_nav_tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ export function LocalNavWithTabs() {
<KuiLocalNavRow>
<KuiLocalNavRowSection>
<div className="kuiLocalBreadcrumbs">
<div className="kuiLocalBreadcrumb">
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<a className="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div className="kuiLocalBreadcrumb">
</h1>
<h1 tabindex="0" id="kui_local_breadcrumb" className="kuiLocalBreadcrumb">
<span className="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</h1>
</div>
</KuiLocalNavRowSection>
<KuiLocalNavRowSection>
Expand Down