Fix Icon accessibility

.storybook/main.js

@@ -30,6 +30,7 @@ module.exports = {
         {
           loader: "@svgr/webpack",
           options: {
+            titleProp: true,
             replaceAttrValues: { "#000": "{props.color}" },
             template: require("../src/react-components/icons/IconTemplate")
           }

src/react-components/icons/IconTemplate.js

@@ -36,7 +36,11 @@ function ${componentName}(${props}) {
 }
 
 ${componentName}.defaultProps = {
-  color: "#000"
+  color: "#000",
+  title: "${componentName.name
+    .match(/[A-Z][a-z]+/g)
+    .slice(1)
+    .join(" ")}"
 };
 
 ${exports}

src/react-components/styles/global.scss

@@ -173,6 +173,11 @@ body:not(:global(.keyboard-user)) {
   }
 }
 
+/* We want svg icons to have title elements for screen readers, but we don't need to show their tooltips when they are inside buttons */
+button svg {
+  pointer-events: none;
+}
+
 /**
  * Breakpoint definitions for use wuth react-use-css-breakpoints
  * https://github.com/matthewhall/react-use-css-breakpoints

webpack.config.js

@@ -389,6 +389,7 @@ module.exports = async (env, argv) => {
             {
               loader: "@svgr/webpack",
               options: {
+                titleProp: true,
                 replaceAttrValues: { "#000": "{props.color}" },
                 template: require("./src/react-components/icons/IconTemplate")
               }