EuiIcon a11y

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))
 - Added `disabled` option to the `option` attribute of the `options` object that is passed to the `EuiCheckboxGroup` so that checkboxes in a group can be individually disabled ([#2548](https://github.com/elastic/eui/pull/2548))
 - Added `EuiAspectRatio` component that allows for responsively resizing embeds ([#2535](https://github.com/elastic/eui/pull/2535))
+- Fixed `EuiIcon` accessibility by adding a title prop and a default `aria-label`
 
 **Bug fixes**
 

scripts/compile-icons.js

@@ -8,28 +8,12 @@ const srcDir = path.resolve(rootDir, 'src');
 const iconsDir = path.resolve(srcDir, 'components', 'icon', 'assets');
 
 function pascalCase(x) {
-  return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) => (char1 || char2).toUpperCase());
+  return x.replace(/^(.)|[^a-zA-Z]([a-zA-Z])/g, (match, char1, char2) =>
+    (char1 || char2).toUpperCase()
+  );
 }
 
-const iconFiles = glob.sync(
-  '**/*.svg',
-  { cwd: iconsDir, realpath: true }
-);
-
-function defaultTemplate({
-                           template
-                         }, opts, {
-                           imports,
-                           componentName,
-                           props,
-                           jsx,
-                           exports
-                         }) {
-  return template.ast`${imports}
-const ${componentName} = (${props}) => ${jsx}
-${exports}
-`;
-}
+const iconFiles = glob.sync('**/*.svg', { cwd: iconsDir, realpath: true });
 
 iconFiles.forEach(async filePath => {
   const svgSource = fs.readFileSync(filePath);
@@ -40,7 +24,7 @@ iconFiles.forEach(async filePath => {
       throw new Error(`${filePath} is missing a 'viewBox' attribute`);
     }
 
-    const jsxSource = (await svgr(
+    const jsxSource = await svgr(
       svgSource,
       {
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
@@ -52,18 +36,23 @@ iconFiles.forEach(async filePath => {
           ],
         },
         svgProps: {
-          xmlns: 'http://www.w3.org/2000/svg'
+          xmlns: 'http://www.w3.org/2000/svg',
         },
-        template: ({ template }, opts, { imports, componentName, props, jsx }) => template.ast`
+        titleProp: true,
+        template: (
+          { template },
+          opts,
+          { imports, componentName, props, jsx }
+        ) => template.ast`
 ${imports}
 const ${componentName} = (${props}) => ${jsx}
 export const icon = ${componentName};
-        `
+        `,
       },
       {
-        componentName: `EuiIcon${pascalCase(path.basename(filePath, '.svg'))}`
+        componentName: `EuiIcon${pascalCase(path.basename(filePath, '.svg'))}`,
       }
-    ));
+    );
 
     const outputFilePath = filePath.replace(/\.svg$/, '.js');
     fs.writeFileSync(outputFilePath, jsxSource);

src-docs/src/views/icon/accessibility.js

@@ -4,6 +4,6 @@ import { EuiIcon } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiIcon type="search" size="l" aria-label="Find information" />
+    <EuiIcon type="search" size="l" title="Find information" />
   </div>
 );

src-docs/src/views/icon/icon_example.js

@@ -87,7 +87,7 @@ const iconTypesSource = require('!!raw-loader!./icon_types');
 const iconTypesSnippet = [
   '<EuiIcon type="logoElastic" size="xl" />',
   '<EuiIcon type={reactSVGElement} size="xl" />',
-  '<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" size="xl" />',
+  '<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" size="xl" title="My SVG logo" />',
   '<EuiButton iconType={reactSVGElement}>Works in other components too</EuiButton>',
 ];
 
@@ -152,8 +152,8 @@ export const IconExample = {
       ],
       text: (
         <p>
-          Editor icons relate to the visual styling of elements and are
-          commonly used within <EuiCode>EuiButtonGroup</EuiCode> components.
+          Editor icons relate to the visual styling of elements and are commonly
+          used within <EuiCode>EuiButtonGroup</EuiCode> components.
         </p>
       ),
       snippet: editorSnippet,
@@ -277,6 +277,39 @@ export const IconExample = {
       snippet: logosThirdSnippet,
       demo: <LogosThird />,
     },
+    {
+      title: 'Accessibility',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: accessibilitySource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: iconsHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            You can title the icon by passing the <EuiCode>title</EuiCode> prop
+            to <EuiCode>EuiIcon</EuiCode>. When the icon is rendered as an
+            inline SVG this <EuiCode>title</EuiCode> is passed to the
+            <EuiCode>title</EuiCode> tag and it's added to the{' '}
+            <EuiCode>aria-label</EuiCode> attribute. When the icon is rendered
+            as an <EuiCode>image</EuiCode> tag the <EuiCode>title</EuiCode> is
+            added to the <EuiCode>alt</EuiCode> attribute.
+          </p>
+          <p>
+            When no <EuiCode>title</EuiCode> is specified the icon gets the
+            default icon file name. For better accessibility it's always
+            recommended to give a descriptive <EuiCode>title</EuiCode> based on
+            the icon use.
+          </p>
+        </>
+      ),
+      demo: <Accessibility />,
+    },
     {
       title: 'Sizes',
       source: [
@@ -331,26 +364,6 @@ export const IconExample = {
       snippet: iconColorsSnippet,
       demo: <IconColors />,
     },
-    {
-      title: 'Accessibility',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: accessibilitySource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: iconsHtml,
-        },
-      ],
-      text: (
-        <p>
-          You can title the SVG by passing the <EuiCode>aria-label</EuiCode>{' '}
-          prop to <EuiCode>EuiIcon</EuiCode>. No value is set by default.
-        </p>
-      ),
-      demo: <Accessibility />,
-    },
     {
       title: 'Custom SVGs',
       text: (

src-docs/src/views/icon/icon_types.js

@@ -30,6 +30,7 @@ export default () => (
           <EuiIcon
             type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"
             size="xl"
+            title="My SVG logo"
           />
           <EuiText size="s">
             <p>http://some.svg</p>
@@ -59,7 +60,9 @@ export default () => (
 
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <EuiButton iconType="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">
+        <EuiButton
+          iconType="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"
+          title="Another SVG Logo">
           http://some.svg
         </EuiButton>
       </EuiFlexItem>

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -28,14 +28,21 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
             type="arrowRight"
           >
             <EuiIconEmpty
+              aria-hidden={true}
+              aria-label=""
               className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
               focusable="false"
+              role="img"
               style={null}
+              title=""
             >
               <svg
+                aria-hidden={true}
+                aria-label=""
                 className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
                 focusable="false"
                 height={16}
+                role="img"
                 style={null}
                 viewBox="0 0 16 16"
                 width={16}
@@ -102,14 +109,21 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
             type="arrowRight"
           >
             <EuiIconEmpty
+              aria-hidden={true}
+              aria-label=""
               className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
               focusable="false"
+              role="img"
               style={null}
+              title=""
             >
               <svg
+                aria-hidden={true}
+                aria-label=""
                 className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
                 focusable="false"
                 height={16}
+                role="img"
                 style={null}
                 viewBox="0 0 16 16"
                 width={16}
@@ -167,9 +181,12 @@ exports[`EuiAccordion is rendered 1`] = `
         class="euiAccordion__iconWrapper"
       >
         <svg
+          aria-hidden="true"
+          aria-label=""
           class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
           focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
@@ -208,9 +225,12 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
         class="euiAccordion__iconWrapper"
       >
         <svg
+          aria-hidden="true"
+          aria-label=""
           class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
           focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
@@ -253,9 +273,12 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
         class="euiAccordion__iconWrapper"
       >
         <svg
+          aria-hidden="true"
+          aria-label=""
           class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
           focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
@@ -296,9 +319,12 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
         class="euiAccordion__iconWrapper"
       >
         <svg
+          aria-hidden="true"
+          aria-label=""
           class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
           focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
@@ -344,9 +370,12 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
         class="euiAccordion__iconWrapper"
       >
         <svg
+          aria-hidden="true"
+          aria-label=""
           class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
           focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"

src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -215,9 +215,12 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
       Content
     </span>
     <svg
+      aria-hidden="true"
+      aria-label=""
       class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
       focusable="false"
       height="16"
+      role="img"
       viewBox="0 0 16 16"
       width="16"
       xmlns="http://www.w3.org/2000/svg"
@@ -239,9 +242,12 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
       Content
     </span>
     <svg
+      aria-hidden="true"
+      aria-label=""
       class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
       focusable="false"
       height="16"
+      role="img"
       viewBox="0 0 16 16"
       width="16"
       xmlns="http://www.w3.org/2000/svg"
@@ -263,9 +269,12 @@ exports[`EuiBadge props iconType is rendered 1`] = `
       Content
     </span>
     <svg
+      aria-hidden="true"
+      aria-label=""
       class="euiIcon euiIcon--small euiIcon-isLoading euiBadge__icon"
       focusable="false"
       height="16"
+      role="img"
       viewBox="0 0 16 16"
       width="16"
       xmlns="http://www.w3.org/2000/svg"

src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap

@@ -19,9 +19,11 @@ exports[`CollapsedItemActions render 1`] = `
       >
         <svg
           aria-hidden="true"
+          aria-label=""
           class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
           focusable="false"
           height="16"
+          role="img"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"