From 72884de85fee2b29f8aeb8da37e903a452fb9eed Mon Sep 17 00:00:00 2001
From: CJ Cenizal
Date: Wed, 10 May 2017 08:23:29 -0700
Subject: [PATCH] Improve Management screen-reader accessibility. (#11601)
* Improve Management screen-reader accessibility:
- Improve description of image generated by an Image URL scripted field. Allow formatted label to be presented in lieu of default alt attribute.
- Remove unnecessary title attribute from Create Index Pattern ISO week date link.
- Add aria-label for Edit Index Pattern tabs.
- Add aria-label for Edit Saved Objects tabs.
---
.../create_index_pattern.html | 1 -
.../edit_index_pattern.html | 6 ++++--
.../management/sections/objects/_objects.html | 5 ++---
src/ui/public/stringify/types/url.js | 19 +++++++++++++++----
4 files changed, 21 insertions(+), 10 deletions(-)
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern/create_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern/create_index_pattern.html
index 5d5d44e60f3352..876c8876cdb04a 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern/create_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern/create_index_pattern.html
@@ -76,7 +76,6 @@
class="kuiLink"
href="https://en.wikipedia.org/wiki/ISO_week_date"
target="_blank"
- title="Wikipedia: ISO Week Date"
translate="KIBANA-WIKI_ISO_WEEK_DATE"
>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
index b5ecd4f4ce4c2d..4b1c3d32e25ac6 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
@@ -73,12 +73,14 @@
class="kuiTab"
ng-repeat="editSection in editSections"
ng-class="{ 'kuiTab-isSelected': state.tab === editSection.index }"
- title="{{ editSection.title }}"
ng-click="changeTab(editSection)"
data-test-subj="tab-{{ editSection.index }}"
>
{{ editSection.title }}
-
+
({{ editSection.count }})
diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.html b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
index cd5576bf1b24eb..6a5921a6fe014d 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/_objects.html
+++ b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
@@ -48,12 +48,11 @@
class="kuiTab kbn-management-tab"
ng-class="{ 'kuiTab-isSelected': state.tab === service.title }"
ng-repeat="service in services"
- title="{{ service.title }}"
ng-click="changeTab(service)"
>
{{ service.title }}
-
- ({{service.data.length}} of {{service.total}})
+
+ ({{service.data.length}} of {{service.total}})
diff --git a/src/ui/public/stringify/types/url.js b/src/ui/public/stringify/types/url.js
index 0f102e579aff39..08543b8bfe5706 100644
--- a/src/ui/public/stringify/types/url.js
+++ b/src/ui/public/stringify/types/url.js
@@ -89,17 +89,28 @@ export function stringifyUrl(Private) {
html: function (rawValue, field, hit) {
const url = _.escape(this._formatUrl(rawValue));
- let label = _.escape(this._formatLabel(rawValue, url));
+ const label = _.escape(this._formatLabel(rawValue, url));
switch (this.param('type')) {
case 'img':
- return '';
+ // If the URL hasn't been formatted to become a meaningful label then the best we can do
+ // is tell screen readers where the image comes from.
+ const imageLabel =
+ label === url
+ ? `A dynamically-specified image located at ${url}`
+ : label;
+
+ return ``;
default:
+ let linkLabel;
+
if (hit && hit.highlight && hit.highlight[field.name]) {
- label = getHighlightHtml(label, hit.highlight[field.name]);
+ linkLabel = getHighlightHtml(label, hit.highlight[field.name]);
+ } else {
+ linkLabel = label;
}
- return '' + label + '';
+ return `${linkLabel}`;
}
}
};