From 72884de85fee2b29f8aeb8da37e903a452fb9eed Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
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"
                 ></a>
               </p>
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 }}
-          <span data-test-subj="tab-count-{{ editSection.index }}">
+          <span
+            data-test-subj="tab-count-{{ editSection.index }}"
+            aria-label="{{:: editSection.count + ' ' + editSection.title}}"
+          >
             ({{ editSection.count }})
           </span>
         </button>
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 @@ <h1 class="kuiTitle">
           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 }}
-          <small>
-          ({{service.data.length}}<span ng-show="service.total > service.data.length"> of {{service.total}}</span>)
+          <small aria-label="{{:: service.data.length + ' of ' + service.total + ' ' + service.title }}">
+            ({{service.data.length}}<span ng-show="service.total > service.data.length"> of {{service.total}}</span>)
           </small>
         </button>
       </div>
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 '<img src="' + url + '" alt="' + label + '" title="' + label + '">';
+          // 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 `<img src="${url}" alt="${imageLabel}">`;
         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 '<a href="' + url + '" target="_blank">' + label + '</a>';
+          return `<a href="${url}" target="_blank">${linkLabel}</a>`;
       }
     }
   };