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` ([#2554](https://github.com/elastic/eui/pull/2554))
 - Added `display` and `titleSize` props to `EuiCard` ([#2566](https://github.com/elastic/eui/pull/2566))
 - Added `accessibility` glyph to `EuiIcon` ([#2566](https://github.com/elastic/eui/pull/2566))
 

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

@@ -11,6 +11,7 @@ import {
   EuiLink,
   EuiText,
   EuiSpacer,
+  EuiCallOut,
 } from '../../../../src/components';
 
 const iconHtmlWarning = () => (
@@ -87,7 +88,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>',
 ];
 
@@ -109,6 +110,20 @@ export const IconExample = {
         </p>
       </EuiText>
       <EuiSpacer />
+      <EuiCallOut
+        title={
+          <>
+            For better accessibility it's always recommended to give a
+            descriptive <EuiCode>title</EuiCode> based on the icon use.
+          </>
+        }
+        color="warning">
+        <p>
+          If the icon is purely decorative, pass{' '}
+          <EuiCode>aria-hidden=true</EuiCode>.
+        </p>
+      </EuiCallOut>
+      <EuiSpacer />
     </div>
   ),
   sections: [
@@ -152,8 +167,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,
@@ -331,26 +346,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"