[5.x] Improve Management screen-reader accessibility. (#11601)

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>

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>

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>

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>`;
       }
     }
   };