Improving EuiIcon a11y (#2786)

* Improving icons with title and aria-labelledby * Deleting testing example * Adding changelog
elastic · Jan 27, 2020 · 096fbfd · 096fbfd
1 parent ecc7471
commit 096fbfd
Show file tree

Hide file tree

Showing 370 changed files with 1,260 additions and 1,358 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Converted `EuiFilterSelectItem` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
 - Converted `EuiFieldSearch` to TypeScript ([#2775](https://github.com/elastic/eui/pull/2775))
 - Added `data-test-subj` to the `EuiContextMenuItem` in `EuiTablePagination` ([#2778](https://github.com/elastic/eui/pull/2778))
+- Improved `EuiIcon` a11y by using a `title` and `aria-labelledby` ([#2786](https://github.com/elastic/eui/pull/2786))
 - Improved compressed `EuiPagination` by including active and last page numbers ([#2779](https://github.com/elastic/eui/pull/2779))
 - Converted `EuiSuperSelect` to TypeScript ([#2776](https://github.com/elastic/eui/pull/2776))
 

diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "@elastic/charts": "^13.0.0",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
-    "@svgr/core": "^4.1.0",
+    "@svgr/core": "5.0.1",
     "@svgr/plugin-svgo": "^4.0.3",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",

diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
@@ -119,8 +119,8 @@ export const IconExample = {
         }
         color="warning">
         <p>
-          If the icon is purely decorative, pass{' '}
-          <EuiCode>aria-hidden=true</EuiCode>.
+          If no title is provided the icon is going to be purely decorative and
+          it will get by default an <EuiCode>aria-hidden=true</EuiCode>.
         </p>
       </EuiCallOut>
       <EuiSpacer />

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title />
           <path
             d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
             fill-rule="nonzero"
@@ -86,7 +85,6 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title />
           <path
             d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
             fill-rule="nonzero"

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title />
           <path
             d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
             fill-rule="nonzero"
@@ -86,7 +85,6 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <title />
           <path
             d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
             fill-rule="nonzero"

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
diff --git a/src/components/icon/assets/accessibility.js b/src/components/icon/assets/accessibility.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAccessibility = ({ title, ...props }) => (
+const EuiIconAccessibility = ({ title, titleId, ...props }) => (
   <svg
     width={16}
     height={16}
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm3.974 4.342a.5.5 0 01-.233.596l-.083.036L9 6.86v2.559l.974 2.923a.5.5 0 01-.233.596l-.083.036a.5.5 0 01-.596-.233l-.036-.083-1-3L8 9.5l-.026.158-1 3a.5.5 0 01-.97-.228l.022-.088L7 9.416V6.86l-2.658-.886a.5.5 0 01.228-.97l.088.022L7.583 6h.833l2.926-.974a.5.5 0 01.632.316zM8 3a1 1 0 110 2 1 1 0 010-2z" />
   </svg>
 );

diff --git a/src/components/icon/assets/aggregate.js b/src/components/icon/assets/aggregate.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAggregate = ({ title, ...props }) => (
+const EuiIconAggregate = ({ title, titleId, ...props }) => (
   <svg
     width={16}
     height={16}
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       fillRule="evenodd"
       d="M2.5 2a.5.5 0 100 1 .5.5 0 000-1zm0-1a1.5 1.5 0 011.415 1h1.908a1.5 1.5 0 011.393.943L8.839 7H12.5a.5.5 0 010 1H8.839l-1.623 4.057A1.5 1.5 0 015.823 13H3.915a1.5 1.5 0 110-1h1.908a.5.5 0 00.464-.314L7.761 8H3.915a1.5 1.5 0 110-1H7.76L6.287 3.314A.5.5 0 005.823 3H3.915A1.5 1.5 0 112.5 1zm0 11a.5.5 0 110 1 .5.5 0 010-1zM3 7.5a.5.5 0 10-1 0 .5.5 0 001 0zm9.354-3.354a.5.5 0 00-.708.708L13.793 7a.707.707 0 010 1l-2.147 2.146a.5.5 0 00.708.708L14.5 8.707a1.707 1.707 0 000-2.414l-2.146-2.147z"

diff --git a/src/components/icon/assets/alert.js b/src/components/icon/assets/alert.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAlert = ({ title, ...props }) => (
+const EuiIconAlert = ({ title, titleId, ...props }) => (
   <svg
     width={16}
     height={16}
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       fillRule="evenodd"
       d="M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"

diff --git a/src/components/icon/assets/annotation.js b/src/components/icon/assets/annotation.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAnnotation = ({ title, ...props }) => (
+const EuiIconAnnotation = ({ title, titleId, ...props }) => (
   <svg
     width={16}
     height={16}
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M3 6.5a4.5 4.5 0 115 4.473V16H7v-5.027A4.5 4.5 0 013 6.5z" />
   </svg>
 );

diff --git a/src/components/icon/assets/apm_trace.js b/src/components/icon/assets/apm_trace.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconApmTrace = ({ title, ...props }) => (
+const EuiIconApmTrace = ({ title, titleId, ...props }) => (
   <svg
     width={16}
     height={16}
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M2 0h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2zm0 1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V2a1 1 0 00-1-1H2zm.5 2h10a.5.5 0 110 1h-10a.5.5 0 010-1zm1 3h6a.5.5 0 010 1h-6a.5.5 0 010-1zm2 3h4a.5.5 0 010 1h-4a.5.5 0 010-1zm3 3h5a.5.5 0 110 1h-5a.5.5 0 110-1z" />
   </svg>
 );

diff --git a/src/components/icon/assets/app_add_data.js b/src/components/icon/assets/app_add_data.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppAddData = ({ title, ...props }) => (
+const EuiIconAppAddData = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M32 30H0V3h12.57l3 5H32v22zM2 28h28V10H14.43l-3-5H2v23z" />
     <path
       className="euiIcon__fillSecondary"

diff --git a/src/components/icon/assets/app_advanced_settings.js b/src/components/icon/assets/app_advanced_settings.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppAdvancedSettings = ({ title, ...props }) => (
+const EuiIconAppAdvancedSettings = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       className="euiIcon__fillSecondary"
       d="M2.909 26.182h1.939v4.848H2.909z"

diff --git a/src/components/icon/assets/app_apm.js b/src/components/icon/assets/app_apm.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppApm = ({ title, ...props }) => (
+const EuiIconAppApm = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M3 10h4v2H1V1h30v6h-2V3H3v7zm26 19v-6h2v8H18v-8h2v6h9z" />
     <path
       className="euiIcon__fillSecondary"

diff --git a/src/components/icon/assets/app_auditbeat.js b/src/components/icon/assets/app_auditbeat.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppAuditbeat = ({ title, ...props }) => (
+const EuiIconAppAuditbeat = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path className="euiIcon__fillSecondary" d="M15 0h2v32h-2z" />
     <path d="M0 32h13v-2H2V2h11V0H0zM19 0v2h11v28H19v2h13V0z" />
   </svg>

diff --git a/src/components/icon/assets/app_canvas.js b/src/components/icon/assets/app_canvas.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppCanvas = ({ title, ...props }) => (
+const EuiIconAppCanvas = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       className="euiIcon__fillSecondary"
       d="M7 17h2v7H7zM12 14h2v10h-2zM17 16h2v8h-2zM22 14h3v2h-3zM22 18h3v2h-3zM22 22h3v2h-3z"

diff --git a/src/components/icon/assets/app_code.js b/src/components/icon/assets/app_code.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppCode = ({ title, ...props }) => (
+const EuiIconAppCode = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M11.276 29l.594 2H0l7.621-14.29.811 2.73L3.333 29h7.943zM28.92 31l-4.987-16.598A16 16 0 008.688 3l1.8 6H8.4L6 1h2.607a18 18 0 0117.241 12.828L31 31h-2.08z" />
     <path
       className="euiIcon__fillSecondary"

diff --git a/src/components/icon/assets/app_console.js b/src/components/icon/assets/app_console.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppConsole = ({ title, ...props }) => (
+const EuiIconAppConsole = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M29 9H3a3 3 0 01-3-3V3a3 3 0 013-3h26a3 3 0 013 3v3a3 3 0 01-3 3zM3 2a1 1 0 00-1 1v3a1 1 0 001 1h26a1 1 0 001-1V3a1 1 0 00-1-1H3z" />
     <path
       className="euiIcon__fillSecondary"

diff --git a/src/components/icon/assets/app_cross_cluster_replication.js b/src/components/icon/assets/app_cross_cluster_replication.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppCrossClusterReplication = ({ title, ...props }) => (
+const EuiIconAppCrossClusterReplication = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M0 0v16h8.7l5.3-6V0H0zm2 2h10v7H7v5H2V2zm8.45 9L9 12.64V11h1.45zM18 16v16h8.7l5.3-6V16H18zm2 2h10v7h-5v5h-5V18zm8.45 9L27 28.64V27h1.45z" />
     <path
       className="euiIcon__fillSecondary"

diff --git a/src/components/icon/assets/app_dashboard.js b/src/components/icon/assets/app_dashboard.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppDashboard = ({ title, ...props }) => (
+const EuiIconAppDashboard = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M29 9H3a3 3 0 01-3-3V3a3 3 0 013-3h26a3 3 0 013 3v3a3 3 0 01-3 3zM3 2a1 1 0 00-1 1v3a1 1 0 001 1h26a1 1 0 001-1V3a1 1 0 00-1-1H3z" />
     <path
       className="euiIcon__fillSecondary"

diff --git a/src/components/icon/assets/app_devtools.js b/src/components/icon/assets/app_devtools.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppDevtools = ({ title, ...props }) => (
+const EuiIconAppDevtools = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path d="M21 28h-2v-8.49l.6-.26A9 9 0 0021 3.52V11H11V3.52a9 9 0 001.4 15.73l.6.26V28h-2v-7.21A11 11 0 0111.6.92L13 .31V9h6V.31l1.4.61a11 11 0 01.6 19.87V28z" />
     <path className="euiIcon__fillSecondary" d="M11 30h10v2H11z" />
   </svg>

diff --git a/src/components/icon/assets/app_discover.js b/src/components/icon/assets/app_discover.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppDiscover = ({ title, ...props }) => (
+const EuiIconAppDiscover = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       className="euiIcon__fillSecondary"
       d="M8.33 23.67l4.79-10.55 10.55-4.79-4.79 10.55-10.55 4.79zm6.3-9l-2.28 5 5-2.28 2.28-5-5 2.28z"

diff --git a/src/components/icon/assets/app_ems.js b/src/components/icon/assets/app_ems.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppEms = ({ title, ...props }) => (
+const EuiIconAppEms = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path className="euiIcon__fillSecondary" d="M3 22h3v2H1V1h23v5h-2V3H3z" />
     <path d="M15.228 29c1.492-1.678 1.353-2.859.009-5.654-.049-.1-.049-.1-.097-.203-1.369-2.855-1.626-4.491-.325-6.582 2.796-4.498 9.514-2.642 14.185 2.317V10H10v19h5.228zm2.47 0H29v-6.983c-3.88-5.406-10.376-7.795-12.487-4.4-.83 1.336-.669 2.37.43 4.662l.097.2c1.352 2.814 1.731 4.63.659 6.521zM31 8v23H8V8h23z" />
   </svg>

diff --git a/src/components/icon/assets/app_filebeat.js b/src/components/icon/assets/app_filebeat.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppFilebeat = ({ title, ...props }) => (
+const EuiIconAppFilebeat = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       className="euiIcon__fillSecondary"
       d="M8 18h16v2H8zM8 13h9v2H8zM8 23h16v2H8z"

diff --git a/src/components/icon/assets/app_gis.js b/src/components/icon/assets/app_gis.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppGis = ({ title, ...props }) => (
+const EuiIconAppGis = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       className="euiIcon__fillSecondary"
       d="M29.014 23.89l2.296 1.145L16 32.101.53 24.961l2.49-1.056 2.453 1.132-.003.002L16 29.899l10.69-4.934-.003-.001 2.327-1.074zm-4.972-7.482l7.268 3.627L16 27.101.53 19.961l7.668-3.252c.392.486.838 1.02 1.34 1.604L5.47 20.039 16 24.899l10.69-4.934-3.954-1.973c.493-.58.928-1.107 1.306-1.584z"

diff --git a/src/components/icon/assets/app_graph.js b/src/components/icon/assets/app_graph.js
@@ -1,13 +1,14 @@
 import React from 'react';
 
-const EuiIconAppGraph = ({ title, ...props }) => (
+const EuiIconAppGraph = ({ title, titleId, ...props }) => (
   <svg
     width={32}
     height={32}
     viewBox="0 0 32 32"
     xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
     {...props}>
-    <title>{title}</title>
+    {title ? <title id={titleId}>{title}</title> : null}
     <path
       className="euiIcon__fillSecondary"
       d="M24 20a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4zm-8.2-5.62A4 4 0 1118 1.06a4 4 0 01-2.2 7.32zm0-6a2 2 0 10.01 0h-.01zm.01 29.24a4 4 0 11-.083-8 4 4 0 01.083 8zm0-6a2 2 0 10.39 0 2 2 0 00-.4 0h.01z"