Merge pull request #563 from matuzalemsteles/issue-536

Add flag to indicate if svg is focusable or not | Fixes #536

packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap

@@ -3,7 +3,7 @@
 exports[`ClayAlert should render a "danger" style alert 1`] = `
 <div class="alert alert-danger fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
       <title>exclamation-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-full"></use>
     </svg>
@@ -14,7 +14,7 @@ exports[`ClayAlert should render a "danger" style alert 1`] = `
 exports[`ClayAlert should render a "success" style alert 1`] = `
 <div class="alert alert-success fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
       <title>check-circle-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle-full"></use>
     </svg>
@@ -25,7 +25,7 @@ exports[`ClayAlert should render a "success" style alert 1`] = `
 exports[`ClayAlert should render a "warning" style alert 1`] = `
 <div class="alert alert-warning fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
       <title>warning-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
@@ -36,13 +36,13 @@ exports[`ClayAlert should render a "warning" style alert 1`] = `
 exports[`ClayAlert should render a closeable alert 1`] = `
 <div class="alert alert-warning fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
       <title>warning-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
@@ -53,7 +53,7 @@ exports[`ClayAlert should render a closeable alert 1`] = `
 exports[`ClayAlert should render an "info" style alert 1`] = `
 <div class="alert alert-info fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
@@ -64,7 +64,7 @@ exports[`ClayAlert should render an "info" style alert 1`] = `
 exports[`ClayAlert should render an alert with classes 1`] = `
 <div class="alert alert-info fade my-custom-class show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
@@ -75,7 +75,7 @@ exports[`ClayAlert should render an alert with classes 1`] = `
 exports[`ClayAlert should render an alert with id 1`] = `
 <div class="alert alert-info fade show" id="myId" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
@@ -86,7 +86,7 @@ exports[`ClayAlert should render an alert with id 1`] = `
 exports[`ClayAlert should render default markup 1`] = `
 <div class="alert alert-info fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>

packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap

@@ -4,13 +4,13 @@ exports[`ClayStripe should render a "danger" style stripe 1`] = `
 <div class="alert alert-danger fade alert-dismissible alert-fluid show" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
         <title>exclamation-full</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-full"></use>
       </svg>
@@ -23,13 +23,13 @@ exports[`ClayStripe should render a "success" style stripe 1`] = `
 <div class="alert alert-success fade alert-dismissible alert-fluid show" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
         <title>check-circle-full</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle-full"></use>
       </svg>
@@ -42,13 +42,13 @@ exports[`ClayStripe should render a "warning" style stripe 1`] = `
 <div class="alert alert-warning fade alert-dismissible alert-fluid show" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
         <title>warning-full</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
       </svg>
@@ -61,13 +61,13 @@ exports[`ClayStripe should render an "info" style stripe 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
@@ -80,13 +80,13 @@ exports[`ClayStripe should render an stripe with classes 1`] = `
 <div class="alert alert-info fade alert-dismissible my-custom-class alert-fluid show" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
@@ -99,13 +99,13 @@ exports[`ClayStripe should render an stripe with id 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" id="myId" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
@@ -118,13 +118,13 @@ exports[`ClayStripe should render default markup 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" role="alert">
   <div class="container">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
       </svg>

packages/clay-alert/src/__tests__/__snapshots__/ClayToast.js.snap

@@ -3,13 +3,13 @@
 exports[`ClayToast should render a "danger" style toast 1`] = `
 <div class="alert alert-danger fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
       <title>exclamation-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-full"></use>
     </svg>
@@ -20,13 +20,13 @@ exports[`ClayToast should render a "danger" style toast 1`] = `
 exports[`ClayToast should render a "success" style toast 1`] = `
 <div class="alert alert-success fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
       <title>check-circle-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle-full"></use>
     </svg>
@@ -37,13 +37,13 @@ exports[`ClayToast should render a "success" style toast 1`] = `
 exports[`ClayToast should render a "warning" style toast 1`] = `
 <div class="alert alert-warning fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
       <title>warning-full</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
@@ -54,13 +54,13 @@ exports[`ClayToast should render a "warning" style toast 1`] = `
 exports[`ClayToast should render an "info" style toast 1`] = `
 <div class="alert alert-info fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
@@ -71,13 +71,13 @@ exports[`ClayToast should render an "info" style toast 1`] = `
 exports[`ClayToast should render an toast with classes 1`] = `
 <div class="alert alert-info fade alert-dismissible my-custom-class show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
@@ -88,13 +88,13 @@ exports[`ClayToast should render an toast with classes 1`] = `
 exports[`ClayToast should render an toast with id 1`] = `
 <div class="alert alert-info fade alert-dismissible show" id="myId" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
@@ -105,13 +105,13 @@ exports[`ClayToast should render an toast with id 1`] = `
 exports[`ClayToast should render default markup 1`] = `
 <div class="alert alert-info fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
       <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
     </svg>

packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap

@@ -6,7 +6,7 @@ exports[`ClayButton should render a button with classes 1`] = `<button class="bt
 
 exports[`ClayButton should render a button with icon 1`] = `
 <button class="btn btn-primary" aria-label="plus" type="button">
-  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus" focusable="false">
     <title>plus</title>
     <use xlink:href="icons.svg#plus"></use>
   </svg>
@@ -16,7 +16,7 @@ exports[`ClayButton should render a button with icon 1`] = `
 exports[`ClayButton should render a button with icon and label 1`] = `
 <button class="btn btn-primary" type="button">
   <span class="inline-item inline-item-before">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus" focusable="false">
       <title>plus</title>
       <use xlink:href="icons.svg#plus"></use>
     </svg>
@@ -25,7 +25,7 @@ exports[`ClayButton should render a button with icon and label 1`] = `
 
 exports[`ClayButton should render a button with icon and monospaced true 1`] = `
 <button class="btn btn-monospaced btn-primary" aria-label="plus" type="button">
-  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus" focusable="false">
     <title>plus</title>
     <use xlink:href="icons.svg#plus"></use>
   </svg>
@@ -41,7 +41,7 @@ exports[`ClayButton should render a button with label and ariaLabel 1`] = `<butt
 exports[`ClayButton should render a button with label and icon 1`] = `
 <button class="btn btn-primary" type="button">
   <span class="inline-item inline-item-before">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus" focusable="false">
       <title>plus</title>
       <use xlink:href="icons.svg#plus"></use>
     </svg>
@@ -51,7 +51,7 @@ exports[`ClayButton should render a button with label and icon 1`] = `
 exports[`ClayButton should render a button with label and icon on right side 1`] = `
 <button class="btn btn-primary" type="button">Label
   <span class="inline-item inline-item-after">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus" focusable="false">
       <title>plus</title>
       <use xlink:href="icons.svg#plus"></use>
     </svg>