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

Improve accessibility of scripted field controls

Browse source 
Ref: Issue #1775
Improve accessibility of scripted field controls with ARIA-Labels

Improve Accessibility of Advanced Settings Rows via ARIA

Improve Accessibility of Advanced Settings Rows via [ARIA-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) to assist keyboard users

Improve Accessibility of Dashboard via ARIA

Use [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) to describe the add visualization button.

Use proper role of button group per http://getbootstrap.com/components/#callout-btn-group-accessibility

Improve Accessibility of Discover via ARIA

Improve accessibility of button groups per: http://getbootstrap.com/components/#callout-btn-group-accessibility

Remove Google Frame in x-ua-compatible

More info: http://blog.chromium.org/2013/06/retiring-chrome-frame.html

Improve accessibility of filter

Provide labels for the menu items

Include titles on the anchors

Use the form role

Fix the "for" so that it corresponds with the input

Include aria-label

Role form

Add ARIA-label

Role form

ARIA labels

Add more aria attributes

Improve aria

Finish up adding more ARIA roles

Set the timepicker's aria-expanded when open

Has popup

State whether the setting field settings is expanded

Include popup

Set alt text

Role of navbar

Set a label for the logo

Setup aria expanded values

Setup aria expansion on sub-navbar

Add aria expansion to main item menu

Set main role

Address @panda01's concerns

Add missing aria-hidden's

Add missing [aria-*] values

Replace directive
This commit is contained in:
Kevin Kirsche 2015-02-23 13:17:03 -05:00 • committed by Kevin Kirsche
parent 5484dd82e1
commit 4343b19cf4
40 changed files with 172 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/kibana/components/agg_table/agg_table.html
View file

@ -7,10 +7,10 @@
<div class="agg-table-controls">
<small>Export:</small>&nbsp;&nbsp;
<a class="small" ng-click="aggTable.exportAsCsv(false)">
Raw <i class="fa fa-download"></i>
Raw <i aria-hidden="true" class="fa fa-download"></i>
</a>&nbsp;&nbsp;&nbsp;
<a class="small" ng-click="aggTable.exportAsCsv(true)">
Formatted <i class="fa fa-download"></i>
Formatted <i aria-hidden="true" class="fa fa-download"></i>
</a>
<paginate-controls></paginate-controls>
</div>

2
src/kibana/components/paginated_table/paginated_table.html
View file

@ -22,7 +22,7 @@
'fa-sort': paginatedTable.sort.columnIndex !== $index || paginatedTable.sort.direction === null
}">
</i>
<i ng-if="col.filterable" class="fa fa-search" ng-click="$event.stopPropagation()" tooltip="Click on a cell to filter"></i>
<i aria-label="Click on a cell to filter" ng-if="col.filterable" class="fa fa-search" ng-click="$event.stopPropagation()" tooltip="Click on a cell to filter"></i>
</th>
</tr>
</thead>

2
src/kibana/components/timepicker/timepicker.html
View file

@ -64,7 +64,7 @@
</div>
<div ng-switch-when="relative">
<form ng-submit="applyRelative()" class="form-inline" name="relativeTime">
<form role="form" ng-submit="applyRelative()" class="form-inline" name="relativeTime">
<div class="kbn-timepicker-section">
<label>
From:

2
src/kibana/components/visualize/visualize.html
View file

@ -2,7 +2,7 @@
class="text-center visualize-error visualize-chart">
<div class="item top"></div>
<div class="item">
<h2><i class="fa fa-meh-o"></i></h2>
<h2 aria-hidden="true"><i aria-hidden="true" class="fa fa-meh-o"></i></h2>
<h4>No results found</h4>
</div>
<div class="item bottom"></div>

4
src/kibana/index.html
View file

@ -3,7 +3,7 @@
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="styles/theme/elk.ico">
<title>Kibana 4</title>
@ -15,7 +15,7 @@
<div class="row">
<div class="col-md-offset-4 col-md-4 page-header initial-load">
<center>
<img width="128" src="images/initial_load.gif">
<img width="128" alt="Loading Kibana" src="images/initial_load.gif">
<h1>
<strong>Kibana</strong>
<small id="cache-message">is loading. Give me a moment here. I'm loading a whole bunch of code. Don't worry, all this good stuff will be cached up for next time!</small>

4
src/kibana/partials/global_config.html
View file

@ -7,6 +7,6 @@
ng-options="opt.display for opt in opts.fetchIntervals">
</select>
</div>
<button type="submit" class="btn btn-default">
<i class="fa fa-save"></i> Save
<button type="submit" class="btn btn-default" aria-label="Save">
<i aria-hidden="true" class="fa fa-save"></i> Save
</button>

2
src/kibana/partials/info.html
View file

@ -1,4 +1,4 @@
<i class="fa fa-info-circle"
<i aria-label="{{info}}" class="fa fa-info-circle"
tooltip="{{info}}"
tooltip-placement="{{placement}}"
tooltip-popup-delay="250"></i>

4
src/kibana/partials/saved_object_finder.html
View file

@ -1,4 +1,4 @@
<form>
<form role="form">
<div class="form-group finder-form">
<div>
<a class="small pull-right" ng-click="manageObject(type)">manage {{type}}</a>
@ -21,7 +21,7 @@
ng-href="{{ makeUrl(hit) }}"
ng-click="onChoose(hit, $event)">
<li>
<i class="fa" ng-if="hit.icon" ng-class="hit.icon"></i> {{hit.title}}
<i aria-hidden="true" class="fa" ng-if="hit.icon" ng-class="hit.icon"></i> {{hit.title}}
<p ng-if="hit.description" ng-bind="hit.description"></p>
</li>
</a>

6
src/kibana/plugins/dashboard/components/panel/panel.html
View file

@ -2,14 +2,14 @@
<div class="panel-heading">
<span class="panel-title">{{savedObj.title}}</span>
<div class="btn-group">
<a ng-show="!appEmbedded" ng-href="{{edit}}/{{panel.id | uriescape}}"><i class="fa fa-pencil"></i></a>
<a ng-show="!appEmbedded" ng-click="remove()"><i class="fa fa-times"></i></a>
<a aria-label="Edit" ng-show="!appEmbedded" ng-href="{{edit}}/{{panel.id | uriescape}}"><i aria-hidden="true" class="fa fa-pencil"></i></a>
<a aria-label="Remove" ng-show="!appEmbedded" ng-click="remove()"><i aria-hidden="true" class="fa fa-times"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div ng-if="error" class="load-error">
<i class="fa fa-exclamation-triangle"></i>
<i aria-hidden="true" class="fa fa-exclamation-triangle"></i>
<span ng-bind="error"></span>
</div>

22
src/kibana/plugins/dashboard/index.html
View file

@ -4,7 +4,8 @@
<form name="queryInput"
class="fill inline-form"
ng-submit="filterResults()">
ng-submit="filterResults()"
role="form">
<div class="typeahead" kbn-typeahead="dashboard">
<div class="input-group"
@ -12,13 +13,14 @@
<input type="text"
placeholder="Filter..."
aria-label="Filter input"
class="form-control"
ng-model="state.query"
input-focus
kbn-typeahead-input
validate-query>
<button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid">
<span class="fa fa-search"></span>
<button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid" aria-label="Filter dashboards">
<span aria-hidden="true" class="fa fa-search"></span>
</button>
</div>
@ -27,21 +29,21 @@
</form>
<div class="button-group">
<div class="button-group" role="toolbar">
<kbn-tooltip text="New Dashboard" placement="bottom" append-to-body="1">
<button ng-click="newDashboard()"><i class="fa fa-file-new-o"></i></button>
<button ng-click="newDashboard()" aria-label="New Dashboard"><i aria-hidden="true" class="fa fa-file-new-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Save Dashboard" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('save')"><i class="fa fa-save"></i></button>
<button aria-label="Save Dashboard" aria-haspopup="true" aria-expanded="{{toggleSaveDashboard}}" ng-click="configTemplate.toggle('save'); toggleSaveDashboard = !toggleSaveDashboard"><i aria-hidden="true" class="fa fa-save"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Load Saved Dashboard" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('load')"><i class="fa fa-folder-open-o"></i></button>
<button aria-label="Load Saved Dashboard" aria-haspopup="true" aria-expanded="{{toggleLoadSavedDashboard}}" ng-click="configTemplate.toggle('load'); toggleLoadSavedDashboard = !toggleLoadSavedDashboard"><i aria-hidden="true" class="fa fa-folder-open-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Share" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('share')"><i class="fa fa-external-link"></i></button>
<button aria-label="Share Dashboard" aria-haspopup="true" aria-expanded="{{toggleShareDashboard}}" ng-click="configTemplate.toggle('share'); toggleShareDashboard = !toggleShareDashboard"><i aria-hidden="true" class="fa fa-external-link"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Add Visualization" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('pickVis')"><i class="fa fa-plus-circle"></i></button>
<button aria-label="Add Visualization" aria-haspopup="true" aria-expanded="{{toggleAddVisualization}}" ng-click="configTemplate.toggle('pickVis'); toggleAddVisualization = !toggleAddVisualization"><i aria-hidden="true" class="fa fa-plus-circle"></i></button>
</kbn-tooltip>
</div>
</navbar>
@ -52,7 +54,7 @@
<div ng-show="!state.panels.length" class="text-center start-screen">
<h2>Ready to get started?</h2>
<p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="configTemplate.open('pickVis')"><i class="fa fa-plus-circle"></i></a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit the <a href="#/visualize">"Visualize"</a> tab to create your first visualization.</p>
<p>Click the <a class="btn btn-xs navbtn-inverse" ng-click="configTemplate.open('pickVis'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization"><i aria-hidden="true" class="fa fa-plus-circle"></i></a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't setup a visualization yet visit the <a href="#/visualize" title="Visualize">"Visualize"</a> tab to create your first visualization.</p>
</div>
<dashboard-grid></dashboard-grid>

4
src/kibana/plugins/dashboard/partials/pick_visualization.html
View file

@ -1,7 +1,7 @@
<div ng-switch on="mode" ng-init="mode = 'visualization'" class="dashboard-panel-picker">
<ul class="nav nav-tabs">
<li ng-class="{active: mode == 'visualization'}"><a ng-click="mode='visualization'">Visualizations</a></li>
<li ng-class="{active: mode == 'search'}"><a ng-click="mode='search'">Searches</a></li>
<li ng-class="{active: mode == 'visualization'}"><a ng-click="mode='visualization'" title="Visualizations">Visualizations</a></li>
<li ng-class="{active: mode == 'search'}"><a ng-click="mode='search'" title="Searches">Searches</a></li>
</ul>
<li class="list-group-item" ng-switch-when="visualization">

10
src/kibana/plugins/dashboard/partials/save_dashboard.html
View file

@ -1,7 +1,7 @@
<form ng-submit="opts.save()">
<form ng-submit="opts.save()" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Save As</label>
<input type="text" ng-model="opts.dashboard.title" class="form-control" placeholder="Dashboard title" input-focus="select">
<label for="dashboardTitle">Save As</label>
<input id="dashboardTitle" type="text" ng-model="opts.dashboard.title" class="form-control" placeholder="Dashboard title" input-focus>
</div>
<button type="submit" ng-disabled="!opts.dashboard.title" class="btn btn-primary">Save</button>
</form>
<button type="submit" ng-disabled="!opts.dashboard.title" class="btn btn-primary" aria-label="Save dashboard">Save</button>
</form>

6
src/kibana/plugins/discover/components/field_chooser/discover_field_details.html
View file

@ -18,9 +18,9 @@
<div ng-repeat="bucket in field.details.buckets" class="discover-field-details-item">
<div>
<span ng-show="field.filterable" class="pull-right">
<i class="fa fa-search-minus pull-right discover-field-details-filter"
<i aria-hidden="true" class="fa fa-search-minus pull-right discover-field-details-filter"
ng-click="updateFilterInQuery(field, bucket.value, '-')"></i>
<i class="fa fa-search-plus pull-right discover-field-details-filter"
<i aria-hidden="true" class="fa fa-search-plus pull-right discover-field-details-filter"
ng-click="updateFilterInQuery(field, bucket.value, '+')"></i>
</span>
<div css-truncate css-truncate-expandable="true" class="discover-field-details-value">
@ -38,7 +38,7 @@
class="sidebar-item-button primary">
Visualize
<span class="discover-field-vis-warning" ng-show="warnings.length" tooltip="{{warnings.join(' ')}}">
( {{warnings.length}} <ng-pluralize count="warnings.length" when="{'1':'warning', 'other':'warnings'}"></ng-pluralize> <i class="fa fa-warning"></i> )
( {{warnings.length}} <ng-pluralize count="warnings.length" when="{'1':'warning', 'other':'warnings'}"></ng-pluralize> <i aria-hidden="true" class="fa fa-warning"></i> )
</span>
</div>

10
src/kibana/plugins/discover/components/field_chooser/field_chooser.html
View file

@ -34,19 +34,23 @@
<i
ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
ng-click="showFields = !showFields"
aria-hidden="true"
class="fa visible-xs visible-sm pull-right field-collapse-toggle" ></i>
<button
ng-class="{ 'btn-default': !filter.active, 'btn-success': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
class="btn btn-xs btn-default pull-right discover-field-filter-toggle"
ng-click="showFilter = !showFilter">
<i class="fa fa-gear"></i>
ng-click="showFilter = !showFilter"
aria-label="Field Settings"
aria-haspopup="true"
aria-expanded="{{showFilter}}">
<i aria-hidden="true" class="fa fa-gear"></i>
</button>
</h5>
</div>
<div class="sidebar-item" ng-show="showFilter">
<div ng-click="showFilter = !showFilter" class="discover-field-details-close">
<i class="fa fa-chevron-up"></i>
<i aria-hidden="true" class="fa fa-chevron-up"></i>
</div>
<form role="form" class="discover-field-details">
<div class="form-group">

35
src/kibana/plugins/discover/index.html
View file

@ -1,6 +1,6 @@
<div ng-controller="discover" class="app-container">
<navbar>
<form class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
<form role="form" class="fill inline-form" ng-submit="fetch()" name="discoverSearch">
<div class="typeahead" kbn-typeahead="discover">
<div class="input-group"
ng-class="discoverSearch.$invalid ? 'has-error' : ''">
@ -9,33 +9,38 @@
kbn-typeahead-input
ng-model="state.query"
placeholder="Search..."
aria-label="Search input"
type="text"
class="form-control">
<button type="submit"
ng-disabled="discoverSearch.$invalid">
<span class="fa fa-search"></span></button>
<!--<button type="button" ng-click="resetQuery()"><span class="fa fa-ban"></span></button>-->
ng-disabled="discoverSearch.$invalid"
aria-label="Search">
<span aria-hidden="true" class="fa fa-search"></span></button>
<!--<button type="button" ng-click="resetQuery()" aria-label="Reset query"><span aria-hidden="true" class="fa fa-ban"></span></button>-->
</div>
<kbn-typeahead-items></kbn-typeahead-items>
</div>
</form>
<div class="button-group">
<div class="button-group" role="toolbar">
<kbn-tooltip text="New Search" placement="bottom" append-to-body="1">
<button ng-click="newQuery()"><i class="fa fa-file-new-o"></i></button>
<button ng-click="newQuery()" aria-label="New Search"><i aria-hidden="true" class="fa fa-file-new-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Save Search" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('save')"><i class="fa fa-save"></i></button>
<button aria-haspopup="true" aria-expanded="{{toggleSaveSearch}}" ng-click="configTemplate.toggle('save'); toggleSaveSearch = !toggleSaveSearch" aria-label="Save Search"><i aria-hidden="true" class="fa fa-save"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Load Saved Search" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('load')"><i class="fa fa-folder-open-o"></i></button>
<button aria-haspopup="true" aria-expanded="{{toggleLoadSavedSearch}}" ng-click="configTemplate.toggle('load'); toggleLoadSavedSearch = !toggleLoadSavedSearch" aria-label="Load Saved Search"><i aria-hidden="true" class="fa fa-folder-open-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Settings" placement="bottom" append-to-body="1">
<button aria-haspopup="true" aria-expanded="{{toggleSettings}}" ng-click="configTemplate.toggle('config'); toggleSettings = !toggleSettings" aria-label="Settings"><i aria-hidden="true" class="fa fa-gear"></i></button>
</kbn-tooltip>
</div>
</navbar>
<config config-template="configTemplate" config-object="opts" config-close="configClose" config-submit="fetch"></config>
<div class="container-fluid">
<div class="container-fluid" role="main">
<div class="row">
<filter-bar state="state"></filter-bar>
</div>
@ -58,7 +63,7 @@
<div class="discover-info">
<span ng-show="opts.savedSearch.id" class="discover-info-title">
<span bindonce bo-bind="opts.savedSearch.title"></span>
<i tooltip="Reload saved query" ng-click="resetQuery();" class="fa fa-undo small"></i>
<i aria-label="Reload saved query" tooltip="Reload saved query" ng-click="resetQuery();" class="fa fa-undo small"></i>
</span>
<strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
<ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
@ -69,7 +74,7 @@
<div ng-show="resultState === 'none'">
<div class="col-md-10 col-md-offset-1">
<h1>No results found <i class="fa fa-meh-o"></i></h1>
<h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
<p>
Unfortunately I could not find any results matching your search. I tried really hard. I looked all over the place and frankly, I just couldn't find anything good. Help me, help you. Here's some ideas:
@ -81,14 +86,14 @@
<ul>
<li ng-repeat="failure in failures | limitTo: failuresShown"><strong>Index:</strong> {{failure.index}} <strong>Shard:</strong> {{failure.shard}} <strong>Reason:</strong> {{failure.reason}} </li>
</ul>
<a ng-click="showAllFailures()" ng-if="failures.length > failuresShown">Show More</a>
<a ng-click="showLessFailures()" ng-if="failures.length === failuresShown && failures.length > 5">Show Less</a>
<a ng-click="showAllFailures()" ng-if="failures.length > failuresShown" title="Show More">Show More</a>
<a ng-click="showLessFailures()" ng-if="failures.length === failuresShown && failures.length > 5" title="Show Less">Show Less</a>
</div>
<div ng-show="opts.timefield">
<p>
<h3>Expand your time range</h3>
<p>I see you are looking at an index with a date field. It is possible your query does not match anything in the current time range, or that there is not data at all in the currently selected time range. Click the button below to open the time picker. For future reference you can open the time picker by clicking the <a class="btn btn-xs navbtn" ng-click="toggleTimepicker()">time picker <i class="fa fa-clock-o"></i></a> in the top right corner of your screen.
<p>I see you are looking at an index with a date field. It is possible your query does not match anything in the current time range, or that there is not data at all in the currently selected time range. Click the button below to open the time picker. For future reference you can open the time picker by clicking the <a class="btn btn-xs navbtn" ng-click="toggleTimepicker(); toggledTimepicker = !toggledTimepicker" aria-expanded="{{toggledTimepicker}}" aria-label="time picker">time picker <i aria-hidden="true" class="fa fa-clock-o"></i></a> in the top right corner of your screen.
</p>
</div>
@ -165,7 +170,7 @@
<div ng-if="rows.length == opts.sampleSize" class="discover-table-footer">
<center>
These are the first {{opts.sampleSize}} results matching your query,
refine your search to see more. <a ng-click="toTop()">Back to top.</a>
refine your search to see more. <a ng-click="toTop()" title="Back to top">Back to top.</a>
</center>
</div>
</div>

6
src/kibana/plugins/discover/partials/save_search.html
View file

@ -2,8 +2,8 @@
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Save Search</label>
<input ng-model="opts.savedSearch.title" input-focus="select" class="form-control" placeholder="Name this search...">
<label for="SaveSearch" class="control-label">Save Search</label>
<input id="SaveSearch" ng-model="opts.savedSearch.title" input-focus="select" class="form-control" placeholder="Name this search...">
</div>
<div class="form-group">
<button ng-click="opts.saveDataSource()" ng-disabled="!opts.savedSearch.title" type="submit" class="btn btn-primary">
@ -12,4 +12,4 @@
</div>
</div>
</div>
</div>
</div>

4
src/kibana/plugins/doc/index.html
View file

@ -6,7 +6,7 @@
<!-- no results -->
<div class="col-md-12" ng-if="status === 'notFound'">
<div class="col-md-12">
<h1>Failed to locate document. <i class="fa fa-meh-o"></i></h1>
<h1>Failed to locate document. <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
<p>
Unfortunately I could not find any documents matching that id, of that type, in that index. I tried really hard. I wanted it to be there. Sometimes I swear documents grow legs and just walk out of the index. Sneaky. I wish I could offer some advice here, something to make you feel better
@ -18,7 +18,7 @@
<!-- no results -->
<div class="col-md-12" ng-if="status === 'error'">
<div class="col-md-12">
<h1>This is bad. <i class="fa fa-meh-o"></i></h1>
<h1>This is bad. <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
<p>
Oh no. Something went very wrong. Its not just that I couldn't find your document, I couldn't even try. The index was missing, or the type. Go check out Elasticsearch, something isn't quite right here.

10
src/kibana/plugins/kibana/kibana.html
View file

@ -15,8 +15,8 @@
<!-- Full navbar -->
<div collapse="!showCollapsed" class="navbar-collapse" id="kibana-primary-navbar">
<ul class="nav navbar-nav">
<li class="logo hidden-xs"></li>
<ul class="nav navbar-nav" role="navigation">
<li aria-label="Kibana Barcode Logo" class="logo hidden-xs"></li>
<li ng-repeat="app in apps.inOrder | filter:{show: true}" ng-class="{active: activeApp === app}">
<a ng-href="#{{app === activeApp ? app.rootPath : app.lastPath}}" bo-text="app.name"></a>
</li>
@ -28,14 +28,14 @@
</li>
<li ng-if="setupComplete" ng-show="timefilter.enabled" class="navbar-timepicker-container">
<a ng-click="toggleTimepicker()">
<a ng-click="toggleTimepicker()" id="timepicker" aria-haspopup="true" aria-expanded="false">
<span ng-show="timefilter.refreshInterval.value > 0" class="navbar-timepicker-auto-refresh-desc">
{{timefilter.refreshInterval.display}}
<i class="fa fa-rotate-right"></i>
<i aria-hidden="true" class="fa fa-rotate-right"></i>
</span>
<span class="navbar-timepicker-timefilter-desc">
<pretty-duration from="timefilter.time.from" to="timefilter.time.to"></pretty-duration>
<i class="fa fa-clock-o"></i>
<i aria-hidden="true" class="fa fa-clock-o"></i>
</span>
</a>
</li>

2
src/kibana/plugins/markdown_vis/markdown_vis_params.html
View file

@ -1,5 +1,5 @@
<div class="markdown-vis-options form-group">
<label>Markdown</label>
<small class="pull-right"><a target="_window" href="https://help.github.com/articles/github-flavored-markdown/">Help <i class="fa-link fa"></i></a></small>
<small class="pull-right"><a target="_window" href="https://help.github.com/articles/github-flavored-markdown/">Help <i aria-hidden="true" class="fa fa-link"></i></a></small>
<textarea ng-model="vis.params.markdown" class="form-control" rows="20"></textarea>
</div>

2
src/kibana/plugins/settings/app.html
View file

@ -9,5 +9,5 @@
</div>
</nav>
<div class="settings-section-container {{section.name}}-settings" ng-transclude></div>
<div role="main" class="settings-section-container {{section.name}}-settings" ng-transclude></div>
</div>

2
src/kibana/plugins/settings/sections/about/index.html
View file

@ -2,7 +2,7 @@
<div class="kbn-settings-about container" ng-controller="settingsAbout">
<div class="col-md-4 col-md-offset-4 jumbotron">
<center>
<img src='plugins/settings/sections/about/barcode.svg' width="128" height="128"><br>
<img src='plugins/settings/sections/about/barcode.svg' alt="Kibana Barcode Logo" width="128" height="128"><br>
<h1>Kibana</h1>
<p>
<table class="table table-condensed kbn-settings-about-versions">

31
src/kibana/plugins/settings/sections/advanced/advanced_row.html
View file

@ -11,7 +11,8 @@
<form
name="forms.configEdit"
ng-if="conf.editting"
ng-submit="save(conf)">
ng-submit="save(conf)"
role="form">
<input
ng-show="conf.normal"
ng-model="conf.unsavedValue"
@ -53,32 +54,40 @@
ng-if="!conf.editting"
ng-click="edit(conf)"
class="btn btn-default"
ng-disabled="conf.tooComplex">
<i class="fa fa-pencil"></i>
ng-disabled="conf.tooComplex"
aria-label="Edit">
<span class="sr-only">Edit</span>
<i aria-hidden="true" class="fa fa-pencil"></i>
</button>
<button
ng-if="conf.editting"
ng-click="save(conf)"
class="btn btn-success"
ng-disabled="conf.loading || conf.tooComplex || forms.configEdit.$invalid">
<i ng-if="!conf.loading" class="fa fa-save"></i>
<i ng-if="conf.loading" class="fa fa-spinner"></i>
ng-disabled="conf.loading || conf.tooComplex || forms.configEdit.$invalid"
aria-label="Save">
<span class="sr-only">Save</span>
<i aria-hidden="true" ng-if="!conf.loading" class="fa fa-save"></i>
<i aria-hidden="true" ng-if="conf.loading" class="fa fa-spinner"></i>
</button>
<button
ng-if="!conf.editting"
ng-click="clear(conf)"
ng-hide="conf.value === undefined"
class="btn btn-danger">
<i class="fa fa-trash-o"></i>
class="btn btn-danger"
aria-label="Clear">
<span class="sr-only">Clear</span>
<i aria-hidden="true" class="fa fa-trash-o"></i>
</button>
<button
ng-if="conf.editting"
ng-click="cancelEdit(conf)"
class="btn btn-default">
<i class="fa fa-times"></i>
class="btn btn-default"
aria-label="Cancel edit">
<span class="sr-only">Cancel Edit</span>
<i aria-hidden="true" class="fa fa-times"></i>
</button>
</td>
</tr>
</tr>

4
src/kibana/plugins/settings/sections/advanced/index.html
View file

@ -6,8 +6,8 @@
Some of these settings may be undocumented, unsupported or experimental. Blanking a field will cause Kibana to use its internal
defaults which may be unacceptable given other configuration directives.
</div>
<form>
<input ng-model="advancedFilter" class="form-control span12" type="text" placeholder="Filter"/>
<form role="form">
<input aria-label="Filter" ng-model="advancedFilter" class="form-control span12" type="text" placeholder="Filter"/>
</form>
<table class="table">
<thead>

14
src/kibana/plugins/settings/sections/indices/_edit.html
View file

@ -4,7 +4,7 @@
<div class="page-header">
<div class="index-pattern-name">
<h1 class="title" css-truncate>
<i ng-if="defaultIndex === indexPattern.id" class="fa fa-star"></i>
<i aria-hidden="true" ng-if="defaultIndex === indexPattern.id" class="fa fa-star"></i>
{{indexPattern.id}}
</h1>
<div class="controls">
@ -12,21 +12,25 @@
ng-click="setDefaultPattern()"
tooltip="Set as default index"
class="btn btn-success">
<i class="fa fa-star"></i>
<span class="sr-only">Set as default index</span>
<i aria-hidden="true" class="fa fa-star"></i>
</button>
<button
confirm-click="indexPattern.refreshFields()"
confirmation="This will reset the field popularity counters. Are you sure you want to reload your fields?"
tooltip="Reload field list"
class="btn btn-warning">
<i class="fa fa-refresh"></i>
<span class="sr-only">Reload field list</span>
<i aria-hidden="true" class="fa fa-refresh"></i>
</button>
<button
aria-label="Remove index pattern"
confirm-click="removePattern()"
confirmation="Are you sure you want to remove this index pattern?"
tooltip="Remove index pattern"
class="btn btn-danger">
<i class="fa fa-trash"></i>
<span class="sr-only">Remove index pattern</span>
<i aria-hidden="true" class="fa fa-trash"></i>
</button>
</div>
</div>
@ -38,7 +42,7 @@
field types must be done using Elasticsearch's
<a target="_window" href="http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping.html">
Mapping API
<i class="fa-link fa"></i>
<i aria-hidden="true" class="fa-link fa"></i>
</a>
</p>
<div bo-if="indexPattern.timeFieldName && indexPattern.intervalName" class="alert alert-info">

2
src/kibana/plugins/settings/sections/indices/_field_name.html
View file

@ -4,5 +4,5 @@
ng-if="indexPattern.timeFieldName === field.name"
tooltip="This field represents the time that events occurred."
class="label label-default">
<i class="fa fa-clock-o"></i>
<i aria-hidden="true" class="fa fa-clock-o"></i>
</span>

8
src/kibana/plugins/settings/sections/indices/_field_popularity.html
View file

@ -1,9 +1,9 @@
<div ng-mouseover="popularityField.name = field.name" ng-mouseout="popularityField.name = null">
<span>{{ field.count }}</span>
<span class="field-popularize" ng-show="popularityField.name == field.name">
<span ng-click="indexPattern.popularizeField(field.name, 1)"
class="label label-default"><i class="fa fa-plus"></i></span>
<span ng-click="indexPattern.popularizeField(field.name, -1)"
class="label label-default"><i class="fa fa-minus"></i></span>
<span aria-label="Plus" ng-click="indexPattern.popularizeField(field.name, 1)"
class="label label-default"><i aria-hidden="true" class="fa fa-plus"></i></span>
<span aria-label="Minus" ng-click="indexPattern.popularizeField(field.name, -1)"
class="label label-default"><i aria-hidden="true" class="fa fa-minus"></i></span>
</span>
</div>'

1
src/kibana/plugins/settings/sections/indices/_field_type.html
View file

@ -1,5 +1,6 @@
<span>{{field.type}}</span>
<i
aria-label="The type of this field changes across indices. It is unavailable for many analysis functions."
ng-if="field.type == 'conflict'"
tooltip="The type of this field changes across indices. It is unavailable for many analysis functions."
class="fa fa-warning text-color-warning">

12
src/kibana/plugins/settings/sections/indices/_scripted_field_controls.html
View file

@ -1,12 +1,14 @@
<div class="actions">
<button ng-click="edit(field)" class="btn btn-xs btn-default">
<i class="fa fa-pencil"></i>
<button ng-click="edit(field)" aria-label="Edit" class="btn btn-xs btn-default">
<span class="sr-only">Edit</span>
<i aria-hidden="true" class="fa fa-pencil"></i>
</button>
<button
confirm-click="remove(field)"
confirmation="Are you sure want to delete '{{field.name}}'? This action is irreversible!"
class="btn btn-xs btn-danger">
<i class="fa fa-trash"></i>
class="btn btn-xs btn-danger"
aria-label="Delete">
<i aria-hidden="true" class="fa fa-trash"></i>
</button>
</div>
</div>

4
src/kibana/plugins/settings/sections/indices/_scripted_fields.html
View file

@ -2,8 +2,8 @@
<p>These scripted fields are computed on the fly from your data. They can be used in visualizations and displayed in your documents, however they can not be searched. You can manage them here and add new ones as you see fit, but be careful, scripts can be tricky! <!-- If you need some examples, why not let Kibana <a ng-click="addDateScripts()"><strong>create a few examples from your date fields.</strong></a --></p>
<header>
<button ng-click="create()" class="btn btn-info">
<i class="fa fa-plus"></i>
<button ng-click="create()" class="btn btn-info" aria-label="Add Scripted Field">
<i aria-hidden="true" class="fa fa-plus"></i>
Add Scripted Field
</button>
</header>

8
src/kibana/plugins/settings/sections/indices/index.html
View file

@ -6,8 +6,10 @@
<a
bo-if="edittingId"
href="#/settings/indices"
class="btn btn-primary btn-xs">
<i class="fa fa-plus"></i> Add New
class="btn btn-primary btn-xs"
aria-label="Add New">
<span class="sr-only">Add New</span>
<i aria-hidden="true" class="fa fa-plus"></i> Add New
</a>
</h5>
</div>
@ -24,7 +26,7 @@
class="sidebar-item">
<a bo-href="pattern.url">
<div bo-class="pattern.class">
<i ng-if="pattern.default" class="fa fa-star"></i>
<i aria-hidden="true" ng-if="pattern.default" class="fa fa-star"></i>
<span bo-text="pattern.id"></span>
</div>
</a>

20
src/kibana/plugins/settings/sections/objects/_objects.html
View file

@ -4,13 +4,13 @@
<p>
From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen.
</p>
<form>
<input ng-model="advancedFilter" class="form-control span12" type="text" placeholder="Filter"/>
<form role="form">
<input aria-label="Filter" ng-model="advancedFilter" class="form-control span12" type="text" placeholder="Filter"/>
</form>
<ul class="nav nav-tabs">
<li class="kbn-settings-tab" ng-class="{ active: state.tab === service.title }" ng-repeat="service in services">
<a ng-click="changeTab(service)">{{ service.title }} <small>({{service.data.length}})</small></a>
<a title="{{ service.title }}" ng-click="changeTab(service)">{{ service.title }} <small>({{service.data.length}})</small></a>
</li>
</ul>
<div class="tab-content">
@ -22,7 +22,7 @@
<a ng-disabled="!deleteAllBtn"
confirm-click="bulkDelete()"
confirmation="Are you sure want to delete the selected {{service.title}}? This action is irreversible!"
class="delete-all btn btn-danger btn-xs"><i class="fa fa-trash"></i> Delete Selected</a>
class="delete-all btn btn-danger btn-xs" aria-label="Delete Selected"><i aria-hidden="true" class="fa fa-trash"></i> Delete Selected</a>
</div>
<div ng-repeat="service in services" ng-class="{ active: state.tab === service.title }" class="tab-pane">
<ul class="list-unstyled">
@ -30,14 +30,18 @@
<div class="actions pull-right">
<button
ng-click="edit(service, item)"
class="btn btn-default">
<i class="fa fa-pencil"></i>
class="btn btn-default"
aria-label="Edit">
<span class="sr-only">Edit</span>
<i aria-hidden="true" class="fa fa-pencil"></i>
</button>
<button
ng-click="open(item)"
class="btn btn-info">
<i class="fa fa-eye"></i>
class="btn btn-info"
aria-label="Hide">
<span class="sr-only">Hide</span>
<i aria-hidden="true" class="fa fa-eye"></i>
</button>
</div>

6
src/kibana/plugins/settings/sections/objects/_view.html
View file

@ -18,7 +18,7 @@
<p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn't be.</p>
</div>
<form name="objectForm" ng-submit="submit()">
<form role="form" name="objectForm" ng-submit="submit()">
<div class="form-group" ng-repeat="field in fields">
<label>{{ field.name }}</label>
<textarea rows="1" msd-elastic ng-if="field.type === 'text'" ng-model="field.value" class="form-control span12"/>
@ -27,8 +27,8 @@
</div>
</form>
<div class="form-group">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
<button class="btn btn-success" ng-click="submit()" ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0">Save {{ title }} Object</button>
<button aria-label="Cancel" class="btn btn-primary" ng-click="cancel()">Cancel</button>
<button aria-label="Save {{ title }} Object" class="btn btn-success" ng-click="submit()" ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0">Save {{ title }} Object</button>
</div>
</kbn-settings-objects-view>
</kbn-settings-app>

2
src/kibana/plugins/table_vis/table_vis.html
View file

@ -1,6 +1,6 @@
<div ng-controller="KbnTableVisController" class="table-vis">
<div ng-if="!hasSomeRows && hasSomeRows !== null" class="table-vis-error">
<h2><i class="fa fa-meh-o"></i></h2>
<h2 aria-hidden="true"><i aria-hidden="true" class="fa fa-meh-o"></i></h2>
<h4>No results found</h4>
</div>

2
src/kibana/plugins/visualize/editor/advanced_toggle.html
View file

@ -1,6 +1,6 @@
<div class="vis-editor-agg-editor-advanced-toggle">
<a ng-click="advancedToggled = !advancedToggled">
<i class="fa fa-caret-down" ng-class="{'fa-caret-down': advancedToggled, 'fa-caret-left': !advancedToggled}"></i>
<i aria-hidden="true" class="fa fa-caret-down" ng-class="{'fa-caret-down': advancedToggled, 'fa-caret-left': !advancedToggled}"></i>
Advanced
</a>
</div>

12
src/kibana/plugins/visualize/editor/agg.html
View file

@ -5,10 +5,11 @@
<!-- open/close editor -->
<button
aria-label="{{ editorOpen ? 'Close Editor' : 'Open Editor' }}"
ng-click="editorOpen = !editorOpen"
type="button"
class="btn btn-xs vis-editor-agg-header-toggle">
<i ng-class="{ 'fa-caret-down': editorOpen, 'fa-caret-right': !editorOpen }" class="fa"></i>
<i aria-hidden="true" ng-class="{ 'fa-caret-down': editorOpen, 'fa-caret-right': !editorOpen }" class="fa"></i>
</button>
<!-- title -->
@ -30,6 +31,7 @@
<div class="vis-editor-agg-header-controls btn-group">
<!-- up button -->
<button
aria-label="Increase Priority"
ng-if="stats.count > 1"
ng-class="{ disabled: $first }"
ng-click="moveUp(agg)"
@ -37,11 +39,12 @@
tooltip-append-to-body="true"
type="button"
class="btn btn-xs btn-default">
<i class="fa fa-caret-up"></i>
<i aria-hidden="true" class="fa fa-caret-up"></i>
</button>
<!-- down button -->
<button
aria-lebl="Decrease Priority"
ng-if="stats.count > 1"
ng-class="{ disabled: $last }"
ng-click="moveDown(agg)"
@ -49,18 +52,19 @@
tooltip-append-to-body="true"
type="button"
class="btn btn-xs btn-default">
<i class="fa fa-caret-down"></i>
<i aria-hidden="true" class="fa fa-caret-down"></i>
</button>
<!-- remove button -->
<button
aria-label="Remove Dimension"
ng-if="stats.count > stats.min"
ng-click="remove(agg)"
tooltip="Remove Dimension"
tooltip-append-to-body="true"
type="button"
class="btn btn-xs btn-danger">
<i class="fa fa-times"></i>
<i aria-hidden="true" class="fa fa-times"></i>
</button>
</div>
</div>

4
src/kibana/plugins/visualize/editor/agg_add.html
View file

@ -20,10 +20,10 @@
<div ng-if="!add.form">
<span ng-if="groupName !== 'buckets' || !stats.count">
<i class="fa fa-plus"></i> Add Aggregation
<i aria-hidden="true" class="fa fa-plus"></i> Add Aggregation
</span>
<span ng-if="groupName === 'buckets' && stats.count > 0">
<i class="fa fa-code-fork"></i> Add Sub Aggregation
<i aria-hidden="true" class="fa fa-code-fork"></i> Add Sub Aggregation
</span>
</div>
<span ng-if="add.form">cancel</span>

28
src/kibana/plugins/visualize/editor/editor.html
View file

@ -6,7 +6,7 @@
ng-dblclick="unlink()"
tooltip="Double click to unlink this visualization from the saved search"
class="bitty-modal visualize-linked">
<i class="fa fa-link"></i>
<i aria-hidden="true" class="fa fa-link"></i>
&nbsp;
This visualization is linked to a saved search:
<b>{{ savedVis.savedSearchId | json}}</b>
@ -16,7 +16,7 @@
ng-if="vis.type.requiresSearch && unlinking"
ng-click="clearUnlinking()"
class="bitty-modal">
<i class="fa fa-chain-broken"></i> Unlinked!
<i aria-hidden="true" class="fa fa-chain-broken"></i> Unlinked!
</div>
<form ng-if="vis.type.requiresSearch && $state.linked" class="inline-form" name="queryInput">
@ -29,8 +29,8 @@
<button
class="btn btn-default" type="submit"
ng-disabled="true">
<span class="fa fa-search"></span>
ng-disabled="true" aria-label="Search">
<span aria-hidden="true" class="fa fa-search"></span>
</button>
</div>
</div>
@ -55,8 +55,8 @@
<button
class="btn btn-default" type="submit"
ng-disabled="queryInput.$invalid">
<span class="fa fa-search"></span>
ng-disabled="queryInput.$invalid" aria-label="Search">
<span aria-hidden="true" class="fa fa-search"></span>
</button>
</div>
<kbn-typeahead-items></kbn-typeahead-items>
@ -66,29 +66,29 @@
<div class="button-group">
<kbn-tooltip text="New Visualization" placement="bottom" append-to-body="1">
<button ng-click="startOver()"><i class="fa fa-file-new-o"></i></button>
<button ng-click="startOver()" aria-label="New Visualization"><i aria-hidden="true" class="fa fa-file-new-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Save Visualization" placement="bottom" append-to-body="1">
<!-- normal save -->
<button ng-if="!editableVis.dirty" ng-click="configTemplate.toggle('save')">
<i class="fa fa-save"></i>
<button ng-if="!editableVis.dirty" ng-click="configTemplate.toggle('save')" aria-label="Save Visualization">
<i aria-hidden="true" class="fa fa-save"></i>
</button>
<!-- save stub with tooltip -->
<button disabled ng-if="editableVis.dirty" tooltip="Apply or Discard your changes before saving">
<i class="fa fa-save"></i>
<button disabled ng-if="editableVis.dirty" tooltip="Apply or Discard your changes before saving" aria-label="Apply or Discard your changes before saving">
<i aria-hidden="true" class="fa fa-save"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Load Saved Visualization" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('load')"><i class="fa fa-folder-open-o"></i></button>
<button ng-click="configTemplate.toggle('load')" aria-label="Load Saved Visualization"><i aria-hidden="true" class="fa fa-folder-open-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Share Visualization" placement="bottom" append-to-body="1">
<button ng-click="configTemplate.toggle('share')"><i class="fa fa-external-link"></i></button>
<button ng-click="configTemplate.toggle('share')" aria-label="Share Visualization"><i aria-hidden="true" class="fa fa-external-link"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Refresh" placement="bottom" append-to-body="1">
<button ng-click="fetch()"><i class="fa fa-refresh"></i></button>
<button ng-click="fetch()" aria-label="Refresh"><i aria-hidden="true" class="fa fa-refresh"></i></button>
</kbn-tooltip>
</div>
</navbar>

2
src/kibana/plugins/visualize/editor/sidebar.html
View file

@ -27,7 +27,7 @@
<p
ng-if="visualizeEditor.$invalid"
class="text-center text-danger sidebar-item-text">
<i class="fa fa-warning"></i> {{visualizeEditor.describeErrors()}}
<i aria-hidden="true" class="fa fa-warning"></i> {{visualizeEditor.describeErrors()}}
</p>
<button
ng-disabled="!vis.dirty || visualizeEditor.$invalid"

1
src/kibana/plugins/visualize/editor/vis_options.html
View file

@ -2,6 +2,7 @@
<div ng-hide="alwaysShowOptions" class="sidebar-item-title" ng-click="showVisOptions = !showVisOptions">
view options
<i
aria-hidden="true"
class="fa fa-caret-down"
ng-class="{'fa-caret-down': showVisOptions, 'fa-caret-right': !showVisOptions}">
</i>

2
src/kibana/plugins/visualize/wizard/step_1.html
View file

@ -9,7 +9,7 @@
ng-repeat="type in visTypes.inTitleOrder"
ng-href="{{ visTypeUrl(type) }}">
<div class="wizard-vis-type-heading">
<i class="fa" ng-class="type.icon"></i>
<i aria-hidden="true" class="fa" ng-class="type.icon"></i>
<h4>{{type.title}}</h4>
</div>
<span class="wizard-vis-type-description">{{type.description}}</span>