From 1c47bf1dbf84ea76a464e543a6aa2df293df184b Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Sun, 30 Apr 2017 21:55:59 -0700
Subject: [PATCH 1/2] Improve Management screen-reader accessibility: - Improve
 description of image generated by an Image URL scripted field. - 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.

---
 .../indices/create_index_pattern/create_index_pattern.html  | 1 -
 .../indices/edit_index_pattern/edit_index_pattern.html      | 6 ++++--
 .../kibana/public/management/sections/objects/_objects.html | 5 ++---
 src/ui/public/stringify/types/url.js                        | 2 +-
 4 files changed, 7 insertions(+), 7 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 b5b565c9903a0..77e234832c156 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 b5ecd4f4ce4c2..4b1c3d32e25ac 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 cd5576bf1b24e..6a5921a6fe014 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 0f102e579aff3..f4f72401888c9 100644
--- a/src/ui/public/stringify/types/url.js
+++ b/src/ui/public/stringify/types/url.js
@@ -93,7 +93,7 @@ export function stringifyUrl(Private) {
 
       switch (this.param('type')) {
         case 'img':
-          return '<img src="' + url + '" alt="' + label + '" title="' + label + '">';
+          return `<img src="${url}" alt="A dynamically-specified image located at ${label}">`;
         default:
           if (hit && hit.highlight && hit.highlight[field.name]) {
             label = getHighlightHtml(label, hit.highlight[field.name]);

From f8da8b18b488fb9ae814b2fb443c0205175655e0 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 9 May 2017 09:15:38 -0700
Subject: [PATCH 2/2] Allow formatted label to be presented in lieu of default
 alt attribute.

---
 src/ui/public/stringify/types/url.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/ui/public/stringify/types/url.js b/src/ui/public/stringify/types/url.js
index f4f72401888c9..08543b8bfe570 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="A dynamically-specified image located at ${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>`;
       }
     }
   };