diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap
index 9ad579a093..e98ee1065b 100644
--- a/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap
+++ b/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>
diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap
index 754132a29d..07ed518750 100644
--- a/packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap
+++ b/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>
diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayToast.js.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayToast.js.snap
index 84433eea38..365887af53 100644
--- a/packages/clay-alert/src/__tests__/__snapshots__/ClayToast.js.snap
+++ b/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>
diff --git a/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap b/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap
index c8d30c6413..c5710ff20d 100644
--- a/packages/clay-button/src/__tests__/__snapshots__/ClayButton.js.snap
+++ b/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>
diff --git a/packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap b/packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
index 5225f0cd29..14b786f4ab 100644
--- a/packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
+++ b/packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
@@ -16,7 +16,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
           <div class="autofit-col">
             <span class="sticker sticker-unstyled">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                   <title>folder</title>
                   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
                 </svg>
@@ -37,7 +37,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
           <div class="autofit-col">
             <span class="sticker sticker-unstyled">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                   <title>folder</title>
                   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
                 </svg>
@@ -58,7 +58,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
     <div class="card-type-asset card image-card">
       <div class="aspect-ratio card-item-first">
         <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -126,7 +126,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
     <div class="card-type-asset card image-card">
       <div class="aspect-ratio card-item-first">
         <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -173,7 +173,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
     <div class="card-type-asset card image-card">
       <div class="aspect-ratio card-item-first">
         <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
index 5585653f29..945d8afd02 100644
--- a/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
+++ b/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
@@ -4,7 +4,7 @@ exports[`ClayFileCard should render a ClayFileCard with actionItems 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -18,7 +18,7 @@ exports[`ClayFileCard should render a ClayFileCard with actionItems 1`] = `
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>
             </svg>
@@ -44,7 +44,7 @@ exports[`ClayFileCard should render a ClayFileCard with classes 1`] = `
 <div class="card-type-asset card file-card my-custom-class">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -64,7 +64,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -87,7 +87,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`danger
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -110,7 +110,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`dark c
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -133,7 +133,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`info c
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -156,7 +156,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`light
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -179,7 +179,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`primar
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -202,7 +202,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`second
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -225,7 +225,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`succes
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -248,7 +248,7 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`warnin
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -271,7 +271,7 @@ exports[`ClayFileCard should render a ClayFileCard with href 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -291,7 +291,7 @@ exports[`ClayFileCard should render a ClayFileCard with icon 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents" focusable="false">
         <title>documents</title>
         <use xlink:href="icons.svg#documents"></use>
       </svg>
@@ -311,7 +311,7 @@ exports[`ClayFileCard should render a ClayFileCard with id 1`] = `
 <div class="card-type-asset card file-card" id="myId">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -331,7 +331,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`danger colo
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -354,7 +354,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`info color\
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -377,7 +377,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`secondary c
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -400,7 +400,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`success col
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -423,7 +423,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`warning col
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -446,7 +446,7 @@ exports[`ClayFileCard should render a ClayFileCard with labels with styles mappe
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -471,7 +471,7 @@ exports[`ClayFileCard should render a ClayFileCard with one label 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -494,7 +494,7 @@ exports[`ClayFileCard should render a ClayFileCard with subtitle 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -515,7 +515,7 @@ exports[`ClayFileCard should render a ClayFileCard with two labels 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -539,7 +539,7 @@ exports[`ClayFileCard should render a ClayFileCard with two labels with styles 1
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
@@ -568,7 +568,7 @@ exports[`ClayFileCard should render a selectable ClayFileCard 1`] = `
           <input class="custom-control-input" ref="input" type="checkbox">
           <span class="custom-control-label"></span>
           <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
               <title>documents-and-media</title>
               <use xlink:href="icons.svg#documents-and-media"></use>
             </svg>
@@ -596,7 +596,7 @@ exports[`ClayFileCard should render a selectable ClayFileCard with input \`name\
           <input class="custom-control-input" name="checkbox01" ref="input" type="checkbox">
           <span class="custom-control-label"></span>
           <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
               <title>documents-and-media</title>
               <use xlink:href="icons.svg#documents-and-media"></use>
             </svg>
@@ -624,7 +624,7 @@ exports[`ClayFileCard should render a selectable ClayFileCard with input \`value
           <input class="custom-control-input" value="checkbox" ref="input" type="checkbox">
           <span class="custom-control-label"></span>
           <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
               <title>documents-and-media</title>
               <use xlink:href="icons.svg#documents-and-media"></use>
             </svg>
@@ -652,7 +652,7 @@ exports[`ClayFileCard should render a selectable disabled ClayFileCard 1`] = `
           <input disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
           <span class="custom-control-label"></span>
           <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
               <title>documents-and-media</title>
               <use xlink:href="icons.svg#documents-and-media"></use>
             </svg>
@@ -680,7 +680,7 @@ exports[`ClayFileCard should render a selectable selected ClayFileCard 1`] = `
           <input checked="" class="custom-control-input" ref="input" type="checkbox">
           <span class="custom-control-label"></span>
           <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
               <title>documents-and-media</title>
               <use xlink:href="icons.svg#documents-and-media"></use>
             </svg>
@@ -703,7 +703,7 @@ exports[`ClayFileCard should render the default markup 1`] = `
 <div class="card-type-asset card file-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media" focusable="false">
         <title>documents-and-media</title>
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
index c1686cfe81..c30a676cb1 100644
--- a/packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
+++ b/packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
@@ -7,7 +7,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with a different
       <div class="autofit-col">
         <span class="sticker sticker-unstyled">
           <span class="sticker-overlay">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
               <title>list</title>
               <use xlink:href="icons.svg#list"></use>
             </svg>
@@ -29,7 +29,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
       <div class="autofit-col">
         <span class="sticker sticker-unstyled">
           <span class="sticker-overlay">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
               <title>folder</title>
               <use xlink:href="icons.svg#folder"></use>
             </svg>
@@ -42,7 +42,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>
             </svg>
@@ -71,7 +71,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with classes 1`]
       <div class="autofit-col">
         <span class="sticker sticker-unstyled">
           <span class="sticker-overlay">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
               <title>folder</title>
               <use xlink:href="icons.svg#folder"></use>
             </svg>
@@ -93,7 +93,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with href 1`] = `
       <div class="autofit-col">
         <span class="sticker sticker-unstyled">
           <span class="sticker-overlay">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
               <title>folder</title>
               <use xlink:href="icons.svg#folder"></use>
             </svg>
@@ -115,7 +115,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with id 1`] = `
       <div class="autofit-col">
         <span class="sticker sticker-unstyled">
           <span class="sticker-overlay">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
               <title>folder</title>
               <use xlink:href="icons.svg#folder"></use>
             </svg>
@@ -142,7 +142,7 @@ exports[`ClayHorizontalCard should render a disabled ClayHorizontalCard 1`] = `
             <div class="autofit-col">
               <span class="sticker sticker-unstyled">
                 <span class="sticker-overlay">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                     <title>folder</title>
                     <use xlink:href="icons.svg#folder"></use>
                   </svg>
@@ -172,7 +172,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard 1`] =
             <div class="autofit-col">
               <span class="sticker sticker-unstyled">
                 <span class="sticker-overlay">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                     <title>folder</title>
                     <use xlink:href="icons.svg#folder"></use>
                   </svg>
@@ -202,7 +202,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
             <div class="autofit-col">
               <span class="sticker sticker-unstyled">
                 <span class="sticker-overlay">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                     <title>folder</title>
                     <use xlink:href="icons.svg#folder"></use>
                   </svg>
@@ -232,7 +232,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
             <div class="autofit-col">
               <span class="sticker sticker-unstyled">
                 <span class="sticker-overlay">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                     <title>folder</title>
                     <use xlink:href="icons.svg#folder"></use>
                   </svg>
@@ -262,7 +262,7 @@ exports[`ClayHorizontalCard should render a selected ClayHorizontalCard 1`] = `
             <div class="autofit-col">
               <span class="sticker sticker-unstyled">
                 <span class="sticker-overlay">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                     <title>folder</title>
                     <use xlink:href="icons.svg#folder"></use>
                   </svg>
@@ -287,7 +287,7 @@ exports[`ClayHorizontalCard should render the default markup 1`] = `
       <div class="autofit-col">
         <span class="sticker sticker-unstyled">
           <span class="sticker-overlay">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
               <title>folder</title>
               <use xlink:href="icons.svg#folder"></use>
             </svg>
diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap
index bcc9aed119..54f669b0b4 100644
--- a/packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap
+++ b/packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap
@@ -11,7 +11,7 @@ exports[`ClayImageCard should render a ClayImageCard with actionItems 1`] = `
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>
             </svg>
@@ -216,7 +216,7 @@ exports[`ClayImageCard should render a ClayImageCard with icon 1`] = `
 <div class="card-type-asset card image-card">
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents" focusable="false">
         <title>documents</title>
         <use xlink:href="icons.svg#documents"></use>
       </svg>
diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
index f3d2f0bcae..5087ad10d7 100644
--- a/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
+++ b/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
@@ -17,7 +17,7 @@ exports[`ClayUserCard should render a ClayUserCard with actionItems 1`] = `
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>
             </svg>
diff --git a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
index 0307f27cd1..df4465fb50 100644
--- a/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
+++ b/packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
@@ -18,7 +18,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -27,7 +27,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -42,13 +42,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -62,7 +62,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -71,7 +71,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -81,7 +81,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -101,7 +101,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -641,7 +641,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -650,7 +650,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -659,7 +659,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -697,7 +697,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -706,7 +706,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -721,13 +721,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -741,7 +741,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -750,7 +750,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -760,7 +760,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -780,7 +780,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -1320,7 +1320,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -1329,7 +1329,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -1338,7 +1338,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -1376,7 +1376,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -1385,7 +1385,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -1400,13 +1400,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -1420,7 +1420,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -1429,7 +1429,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -1439,7 +1439,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -1459,7 +1459,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -1999,7 +1999,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -2008,7 +2008,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -2017,7 +2017,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -2066,7 +2066,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="trash" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
               <title>trash</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
             </svg>
@@ -2074,7 +2074,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
         </li>
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="download" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
               <title>download</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
             </svg>
@@ -2083,7 +2083,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
         <li class="nav-item">
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -2103,7 +2103,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -2231,7 +2231,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -2240,7 +2240,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -2255,13 +2255,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -2275,7 +2275,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -2284,7 +2284,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -2294,7 +2294,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -2314,7 +2314,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -2521,7 +2521,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -2530,7 +2530,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -2539,7 +2539,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -2588,7 +2588,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and de
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="trash" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
               <title>trash</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
             </svg>
@@ -2596,7 +2596,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and de
         </li>
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="download" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
               <title>download</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
             </svg>
@@ -2605,7 +2605,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and de
         <li class="nav-item">
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -2625,7 +2625,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and de
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -2750,7 +2750,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -2759,7 +2759,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -2774,13 +2774,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -2794,7 +2794,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -2803,7 +2803,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -2813,7 +2813,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -2841,7 +2841,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                       <div class="autofit-col">
                         <span class="sticker sticker-unstyled">
                           <span class="sticker-overlay">
-                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                               <title>folder</title>
                               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
                             </svg>
@@ -2854,7 +2854,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                       <div class="autofit-col">
                         <div class="dropdown dropdown-action">
                           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                               <title>ellipsis-v</title>
                               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                             </svg>
@@ -2880,7 +2880,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                       <div class="autofit-col">
                         <span class="sticker sticker-unstyled">
                           <span class="sticker-overlay">
-                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                               <title>folder</title>
                               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
                             </svg>
@@ -2893,7 +2893,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                       <div class="autofit-col">
                         <div class="dropdown dropdown-action">
                           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                               <title>ellipsis-v</title>
                               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                             </svg>
@@ -2919,7 +2919,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                     <input aria-labelledby="group-1" class="custom-control-input" name="recipe" value="3" ref="input" type="checkbox">
                     <span class="custom-control-label"></span>
                     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-                      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                         <title>exclamation-circle</title>
                         <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                       </svg>
@@ -2942,7 +2942,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -2981,7 +2981,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3020,7 +3020,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3041,7 +3041,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                     <input aria-labelledby="group-1" class="custom-control-input" name="recipe" value="6" ref="input" type="checkbox">
                     <span class="custom-control-label"></span>
                     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-                      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                         <title>exclamation-circle</title>
                         <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                       </svg>
@@ -3064,7 +3064,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3103,7 +3103,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3124,7 +3124,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                     <input aria-labelledby="group-1" class="custom-control-input" name="recipe" value="8" ref="input" type="checkbox">
                     <span class="custom-control-label"></span>
                     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
-                      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                         <title>exclamation-circle</title>
                         <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                       </svg>
@@ -3147,7 +3147,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3186,7 +3186,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3224,7 +3224,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3260,7 +3260,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                   <div class="autofit-col">
                     <div class="dropdown dropdown-action">
                       <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                           <title>ellipsis-v</title>
                           <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                         </svg>
@@ -3389,7 +3389,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -3398,7 +3398,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -3407,7 +3407,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -3599,7 +3599,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -3608,7 +3608,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -3623,13 +3623,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -3643,7 +3643,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -3652,7 +3652,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -3662,7 +3662,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -3692,7 +3692,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                   <title>folder</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
                 </svg>
@@ -3705,13 +3705,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -3719,7 +3719,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -3741,7 +3741,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
                   <title>folder</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
                 </svg>
@@ -3754,13 +3754,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -3768,7 +3768,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -3793,7 +3793,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -3812,13 +3812,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -3826,7 +3826,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -3848,7 +3848,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -3867,13 +3867,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -3881,7 +3881,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -3903,7 +3903,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -3922,13 +3922,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -3936,7 +3936,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -3958,7 +3958,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -3977,13 +3977,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -3991,7 +3991,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -4013,7 +4013,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -4032,13 +4032,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -4046,7 +4046,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -4068,7 +4068,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -4087,13 +4087,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -4101,7 +4101,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -4126,7 +4126,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -4139,13 +4139,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -4153,7 +4153,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -4175,7 +4175,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -4188,13 +4188,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -4202,7 +4202,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -4224,7 +4224,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <span class="sticker sticker-primary rounded-circle">
               <span class="sticker-overlay">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
                   <title>exclamation-circle</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
                 </svg>
@@ -4237,13 +4237,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
           <div class="autofit-col">
             <div class="quick-action-menu">
               <a aria-label="Remove" class=" quick-action-item" href="#1">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                   <title>trash</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
                 </svg>
               </a>
               <a aria-label="Download" class=" quick-action-item" href="#2">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                   <title>download</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
                 </svg>
@@ -4251,7 +4251,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
             </div>
             <div class="dropdown dropdown-action">
               <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                   <title>ellipsis-v</title>
                   <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
                 </svg>
@@ -4376,7 +4376,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -4385,7 +4385,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -4394,7 +4394,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -4586,7 +4586,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -4595,7 +4595,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -4610,13 +4610,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -4630,7 +4630,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -4639,7 +4639,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -4649,7 +4649,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -4669,7 +4669,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -5209,7 +5209,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -5218,7 +5218,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -5227,7 +5227,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -5265,7 +5265,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -5274,7 +5274,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -5289,13 +5289,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -5309,7 +5309,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -5318,7 +5318,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -5328,7 +5328,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -5348,7 +5348,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -5552,7 +5552,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -5561,7 +5561,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -5570,7 +5570,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -5617,7 +5617,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected gro
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="trash" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
               <title>trash</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
             </svg>
@@ -5625,7 +5625,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected gro
         </li>
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="download" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
               <title>download</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
             </svg>
@@ -5634,7 +5634,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected gro
         <li class="nav-item">
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -5654,7 +5654,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected gro
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -6124,7 +6124,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected ite
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="trash" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
               <title>trash</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
             </svg>
@@ -6132,7 +6132,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected ite
         </li>
         <li class="nav-item navbar-breakpoint-down-d-none">
           <button class="btn quick-action-item btn-unstyled" aria-label="download" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
               <title>download</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#download"></use>
             </svg>
@@ -6141,7 +6141,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected ite
         <li class="nav-item">
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -6161,7 +6161,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected ite
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -6438,7 +6438,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
                 <title>caret-bottom</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
               </svg>
@@ -6447,7 +6447,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
         </li>
         <li class="nav-item">
           <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
               <title>order-arrow</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
             </svg>
@@ -6462,13 +6462,13 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
                 <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
                 <span class="input-group-inset-item input-group-inset-item-after">
                   <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                   <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                       <title>search</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                     </svg>
@@ -6482,7 +6482,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
       <ul class="navbar-nav">
         <li class="nav-item navbar-breakpoint-d-none">
           <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
               <title>search</title>
               <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#search"></use>
             </svg>
@@ -6491,7 +6491,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
         <li class="dropdown nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
                 <title>table</title>
                 <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
               </svg>
@@ -6501,7 +6501,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
         <li class="nav-item">
           <div class="dropdown">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../../../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
               </svg>
@@ -6521,7 +6521,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
               <th class="table-cell-expand">
                 <button class="btn btn-unstyled" type="button">Name
                   <span class="inline-item inline-item-after">
-                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                       <title>order-arrow-up</title>
                       <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
                     </svg>
@@ -6877,7 +6877,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -6886,7 +6886,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -6895,7 +6895,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../../../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
index 6dc652a26a..ec959dd1ef 100644
--- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
+++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayActionsDropdown.js.snap
@@ -3,7 +3,7 @@
 exports[`ClayActionsDropdown should render a disabled dropdown 1`] = `
 <div class="dropdown dropdown-action">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" disabled="" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
       <title>ellipsis-v</title>
       <use xlink:href="icons.svg#ellipsis-v"></use>
     </svg>
@@ -46,7 +46,7 @@ exports[`ClayActionsDropdown should render a disabled dropdown 1`] = `
 exports[`ClayActionsDropdown should render an actions dropdown with classes 1`] = `
 <div class="dropdown dropdown-action my-custom-class">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
       <title>ellipsis-v</title>
       <use xlink:href="icons.svg#ellipsis-v"></use>
     </svg>
@@ -89,7 +89,7 @@ exports[`ClayActionsDropdown should render an actions dropdown with classes 1`]
 exports[`ClayActionsDropdown should render an actions dropdown with id 1`] = `
 <div class="dropdown dropdown-action" id="myId">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
       <title>ellipsis-v</title>
       <use xlink:href="icons.svg#ellipsis-v"></use>
     </svg>
@@ -132,7 +132,7 @@ exports[`ClayActionsDropdown should render an actions dropdown with id 1`] = `
 exports[`ClayActionsDropdown should render an expanded action dropdown 1`] = `
 <div class="dropdown dropdown-action show">
   <button aria-expanded="true" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
       <title>ellipsis-v</title>
       <use xlink:href="icons.svg#ellipsis-v"></use>
     </svg>
@@ -175,7 +175,7 @@ exports[`ClayActionsDropdown should render an expanded action dropdown 1`] = `
 exports[`ClayActionsDropdown should render default markdown 1`] = `
 <div class="dropdown dropdown-action">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
       <title>ellipsis-v</title>
       <use xlink:href="icons.svg#ellipsis-v"></use>
     </svg>
diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap
index 53d4d4abdf..753fbea715 100644
--- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap
+++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdown.js.snap
@@ -3,7 +3,7 @@
 exports[`ClayDropdown should render a disabled dropdown with items 1`] = `
 <div class="dropdown">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" disabled="" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
@@ -96,7 +96,7 @@ exports[`ClayDropdown should render a disabled dropdown with items 1`] = `
 exports[`ClayDropdown should render a dropdown with an icon trigger 1`] = `
 <div class="dropdown">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
       <title>list</title>
       <use xlink:href="icons.svg#list"></use>
     </svg>
@@ -189,7 +189,7 @@ exports[`ClayDropdown should render a dropdown with an icon trigger 1`] = `
 exports[`ClayDropdown should render a dropdown with classes 1`] = `
 <div class="dropdown my-custom-class">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
@@ -282,7 +282,7 @@ exports[`ClayDropdown should render a dropdown with classes 1`] = `
 exports[`ClayDropdown should render a dropdown with id 1`] = `
 <div class="dropdown" id="myId">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
@@ -375,7 +375,7 @@ exports[`ClayDropdown should render a dropdown with id 1`] = `
 exports[`ClayDropdown should render a dropdown with items 1`] = `
 <div class="dropdown">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
@@ -468,7 +468,7 @@ exports[`ClayDropdown should render a dropdown with items 1`] = `
 exports[`ClayDropdown should render a dropdown with trigger custom classes 1`] = `
 <div class="dropdown">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn my-custom-class btn-unstyled" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
@@ -561,7 +561,7 @@ exports[`ClayDropdown should render a dropdown with trigger custom classes 1`] =
 exports[`ClayDropdown should render a searchable dropdown 1`] = `
 <div class="dropdown">
   <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
@@ -575,7 +575,7 @@ exports[`ClayDropdown should render a searchable dropdown 1`] = `
           <input aria-label="Search for..." class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text" ref="searchInput">
           <span class="input-group-inset-item input-group-inset-item-after">
             <button class="btn btn-link" aria-label="search" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                 <title>search</title>
                 <use xlink:href="icons.svg#search"></use>
               </svg>
@@ -671,7 +671,7 @@ exports[`ClayDropdown should render a searchable dropdown 1`] = `
 exports[`ClayDropdown should render an expanded dropdown 1`] = `
 <div class="dropdown show">
   <button aria-expanded="true" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">Trigger
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
       <title>caret-bottom</title>
       <use xlink:href="icons.svg#caret-bottom"></use>
     </svg>
diff --git a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap
index 60735b0329..36b72b2203 100644
--- a/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap
+++ b/packages/clay-dropdown/src/__tests__/__snapshots__/ClayDropdownBase.js.snap
@@ -132,7 +132,7 @@ exports[`ClayDropdownBase should render a dropdown with icons on the left 1`] =
     <li>
       <a class=" dropdown-item" href="item1url">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check" focusable="false">
             <title>check</title>
             <use xlink:href="icons.svg#check"></use>
           </svg>
@@ -141,7 +141,7 @@ exports[`ClayDropdownBase should render a dropdown with icons on the left 1`] =
     <li>
       <a class=" dropdown-item" href="item2url">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check" focusable="false">
             <title>check</title>
             <use xlink:href="icons.svg#check"></use>
           </svg>
@@ -160,7 +160,7 @@ exports[`ClayDropdownBase should render a dropdown with icons on the right 1`] =
     <li>
       <a class=" dropdown-item" href="item1url">Item 1
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check" focusable="false">
             <title>check</title>
             <use xlink:href="icons.svg#check"></use>
           </svg>
@@ -170,7 +170,7 @@ exports[`ClayDropdownBase should render a dropdown with icons on the right 1`] =
     <li>
       <a class=" dropdown-item" href="item2url">Item 2
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check" focusable="false">
             <title>check</title>
             <use xlink:href="icons.svg#check"></use>
           </svg>
@@ -618,7 +618,7 @@ exports[`ClayDropdownBase should render a searchable dropdown 1`] = `
           <input aria-label="Search for..." class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text" ref="searchInput">
           <span class="input-group-inset-item input-group-inset-item-after">
             <button class="btn btn-link" aria-label="search" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                 <title>search</title>
                 <use xlink:href="icons.svg#search"></use>
               </svg>
diff --git a/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.js.snap b/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.js.snap
index b5945365d7..6192a144ce 100644
--- a/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.js.snap
+++ b/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.js.snap
@@ -1,35 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClayIcon should render an icon with classes 1`] = `
-<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell my-custom-class">
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell my-custom-class" focusable="false">
+  <title>add-cell</title>
+  <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
+</svg>
+`;
+
+exports[`ClayIcon should render an icon with focusable to false by default 1`] = `
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" focusable="false">
+  <title>add-cell</title>
+  <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
+</svg>
+`;
+
+exports[`ClayIcon should render an icon with focusable to true 1`] = `
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" focusable="true">
   <title>add-cell</title>
   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;
 
 exports[`ClayIcon should render an icon with id 1`] = `
-<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" id="myId">
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" focusable="false" id="myId">
   <title>myId</title>
   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;
 
 exports[`ClayIcon should render an icon with specified title 1`] = `
-<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell">
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" focusable="false">
   <title>myTitle</title>
   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;
 
 exports[`ClayIcon should render an icon with specified title when id is passed too 1`] = `
-<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" id="myId">
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" focusable="false" id="myId">
   <title>myTitle</title>
   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;
 
 exports[`ClayIcon should render markup for icon \`add-cell\` 1`] = `
-<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell">
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" focusable="false">
   <title>add-cell</title>
   <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#add-cell"></use>
 </svg>
diff --git a/packages/clay-label/src/__tests__/__snapshots__/ClayLabel.js.snap b/packages/clay-label/src/__tests__/__snapshots__/ClayLabel.js.snap
index 145a85fca4..753b0ce489 100644
--- a/packages/clay-label/src/__tests__/__snapshots__/ClayLabel.js.snap
+++ b/packages/clay-label/src/__tests__/__snapshots__/ClayLabel.js.snap
@@ -25,7 +25,7 @@ exports[`ClayLabel should render a label with link 1`] = `
 exports[`ClayLabel should render a label with removable 1`] = `
 <span class="label label-secondary label-dismissible">Foo
   <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="icons.svg#times"></use>
     </svg>
diff --git a/packages/clay-link/src/__tests__/__snapshots__/ClayLink.js.snap b/packages/clay-link/src/__tests__/__snapshots__/ClayLink.js.snap
index 7ed6dafbbc..871775b55a 100644
--- a/packages/clay-link/src/__tests__/__snapshots__/ClayLink.js.snap
+++ b/packages/clay-link/src/__tests__/__snapshots__/ClayLink.js.snap
@@ -20,7 +20,7 @@ exports[`ClayLink should render a link with href 1`] = `<a href="http://www.life
 
 exports[`ClayLink should render a link with icon 1`] = `
 <a>
-  <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>
@@ -29,7 +29,7 @@ exports[`ClayLink should render a link with icon 1`] = `
 
 exports[`ClayLink should render a link with icon and label 1`] = `
 <a>
-  <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>My Link</a>
@@ -51,7 +51,7 @@ exports[`ClayLink should render a link with image and image alt 1`] = `
 
 exports[`ClayLink should render a link with label and icon 1`] = `
 <a>My Link
-  <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>
diff --git a/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap b/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap
index 35c9c7575f..c0e4220b80 100644
--- a/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap
+++ b/packages/clay-list/src/__tests__/__snapshots__/ClayList.js.snap
@@ -104,7 +104,7 @@ exports[`ClayList should render a selectable ClayList with action menu 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -118,7 +118,7 @@ exports[`ClayList should render a selectable ClayList with action menu 1`] = `
       <div class="quick-action-menu"></div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -130,7 +130,7 @@ exports[`ClayList should render a selectable ClayList with action menu 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -144,7 +144,7 @@ exports[`ClayList should render a selectable ClayList with action menu 1`] = `
       <div class="quick-action-menu"></div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -186,7 +186,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -201,7 +201,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -219,7 +219,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -237,7 +237,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -255,7 +255,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -273,7 +273,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -291,7 +291,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -309,7 +309,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -330,7 +330,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -345,7 +345,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -360,7 +360,7 @@ exports[`ClayList should render a selectable ClayList with circle icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -470,7 +470,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -485,7 +485,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -503,7 +503,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -521,7 +521,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -539,7 +539,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -557,7 +557,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -575,7 +575,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -593,7 +593,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -614,7 +614,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -629,7 +629,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -644,7 +644,7 @@ exports[`ClayList should render a selectable ClayList with icons 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -667,7 +667,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -682,7 +682,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
             <title>folder</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#folder"></use>
           </svg>
@@ -700,7 +700,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -721,7 +721,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -742,7 +742,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -763,7 +763,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -784,7 +784,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -805,7 +805,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -829,7 +829,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -844,7 +844,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -859,7 +859,7 @@ exports[`ClayList should render a selectable ClayList with label 1`] = `
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -879,7 +879,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -898,13 +898,13 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <div class="quick-action-menu">
         <a aria-label="Remove" class=" quick-action-item" href="#1">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
             <title>trash</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
           </svg>
         </a>
         <a aria-label="Download" class=" quick-action-item" href="#2">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
             <title>download</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
           </svg>
@@ -912,7 +912,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
       </div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -924,7 +924,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -943,13 +943,13 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <div class="quick-action-menu">
         <a aria-label="Remove" class=" quick-action-item" href="#1">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
             <title>trash</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
           </svg>
         </a>
         <a aria-label="Download" class=" quick-action-item" href="#2">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
             <title>download</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
           </svg>
@@ -957,7 +957,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
       </div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -969,7 +969,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -988,13 +988,13 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <div class="quick-action-menu">
         <a aria-label="Remove" class=" quick-action-item" href="#1">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
             <title>trash</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
           </svg>
         </a>
         <a aria-label="Download" class=" quick-action-item" href="#2">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
             <title>download</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
           </svg>
@@ -1002,7 +1002,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
       </div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -1014,7 +1014,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -1033,13 +1033,13 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <div class="quick-action-menu">
         <a aria-label="Remove" class=" quick-action-item" href="#1">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
             <title>trash</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
           </svg>
         </a>
         <a aria-label="Download" class=" quick-action-item" href="#2">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
             <title>download</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
           </svg>
@@ -1047,7 +1047,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
       </div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -1059,7 +1059,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -1078,13 +1078,13 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <div class="quick-action-menu">
         <a aria-label="Remove" class=" quick-action-item" href="#1">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
             <title>trash</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
           </svg>
         </a>
         <a aria-label="Download" class=" quick-action-item" href="#2">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
             <title>download</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
           </svg>
@@ -1092,7 +1092,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
       </div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
@@ -1104,7 +1104,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <span class="sticker sticker-primary rounded-circle">
         <span class="sticker-overlay">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false">
             <title>exclamation-circle</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-circle"></use>
           </svg>
@@ -1123,13 +1123,13 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
     <div class="autofit-col">
       <div class="quick-action-menu">
         <a aria-label="Remove" class=" quick-action-item" href="#1">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
             <title>trash</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
           </svg>
         </a>
         <a aria-label="Download" class=" quick-action-item" href="#2">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
             <title>download</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
           </svg>
@@ -1137,7 +1137,7 @@ exports[`ClayList should render a selectable ClayList with quick action menu 1`]
       </div>
       <div class="dropdown dropdown-action">
         <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
             <title>ellipsis-v</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
           </svg>
diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
index f4756926c2..d16da45e75 100644
--- a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
+++ b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
@@ -17,7 +17,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" disabled="" type="button">Filter and Order
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
               <title>caret-bottom</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
             </svg>
@@ -26,7 +26,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
       </li>
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" disabled="disabled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -41,13 +41,13 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
               <input aria-label="Search" disabled="" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" disabled="disabled" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -61,7 +61,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" disabled="disabled" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -70,7 +70,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
               <title>list</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#list"></use>
             </svg>
@@ -79,7 +79,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -124,7 +124,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -133,7 +133,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
     <li>
       <a class=" dropdown-item disabled" href="javascript:;">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -142,7 +142,7 @@ exports[`ClayManagementToolbar should render a disabled management toolbar 1`] =
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -179,7 +179,7 @@ exports[`ClayManagementToolbar should render a management toolbar with actions i
       <li class="nav-item">
         <div class="dropdown dropdown-action">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
             </svg>
@@ -207,7 +207,7 @@ exports[`ClayManagementToolbar should render a management toolbar with ascending
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -222,13 +222,13 @@ exports[`ClayManagementToolbar should render a management toolbar with ascending
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -242,7 +242,7 @@ exports[`ClayManagementToolbar should render a management toolbar with ascending
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -250,7 +250,7 @@ exports[`ClayManagementToolbar should render a management toolbar with ascending
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -267,7 +267,7 @@ exports[`ClayManagementToolbar should render a management toolbar with classes 1
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -282,13 +282,13 @@ exports[`ClayManagementToolbar should render a management toolbar with classes 1
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -302,7 +302,7 @@ exports[`ClayManagementToolbar should render a management toolbar with classes 1
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -310,7 +310,7 @@ exports[`ClayManagementToolbar should render a management toolbar with classes 1
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -354,7 +354,7 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-down-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -369,13 +369,13 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -389,7 +389,7 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -397,7 +397,7 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -415,7 +415,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
               <title>caret-bottom</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
             </svg>
@@ -424,7 +424,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -439,13 +439,13 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -459,7 +459,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -467,7 +467,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -495,7 +495,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
               <title>caret-bottom</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
             </svg>
@@ -504,7 +504,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -519,13 +519,13 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -539,7 +539,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -547,7 +547,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -596,7 +596,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
               <title>caret-bottom</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
             </svg>
@@ -605,7 +605,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -620,13 +620,13 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -640,7 +640,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -648,7 +648,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -683,7 +683,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled" type="button">Filter and Order
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
               <title>caret-bottom</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
             </svg>
@@ -692,7 +692,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -707,13 +707,13 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -727,7 +727,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -735,7 +735,7 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -798,7 +798,7 @@ exports[`ClayManagementToolbar should render a management toolbar with id 1`] =
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -813,13 +813,13 @@ exports[`ClayManagementToolbar should render a management toolbar with id 1`] =
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -833,7 +833,7 @@ exports[`ClayManagementToolbar should render a management toolbar with id 1`] =
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -841,7 +841,7 @@ exports[`ClayManagementToolbar should render a management toolbar with id 1`] =
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -885,7 +885,7 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -900,13 +900,13 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -920,7 +920,7 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -929,7 +929,7 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
       <li class="nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none btn-primary" 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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
             </svg>
@@ -957,7 +957,7 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -972,13 +972,13 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -992,7 +992,7 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1000,7 +1000,7 @@ exports[`ClayManagementToolbar should render a management toolbar with plus butt
       </li>
       <li class="nav-item">
         <a class="btn btn-primary nav-btn nav-btn-monospaced navbar-breakpoint-down-d-none" href="#1">
-          <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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -1017,7 +1017,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search ac
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -1032,13 +1032,13 @@ exports[`ClayManagementToolbar should render a management toolbar with search ac
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -1052,7 +1052,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search ac
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1060,7 +1060,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search ac
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -1077,7 +1077,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search fo
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -1092,13 +1092,13 @@ exports[`ClayManagementToolbar should render a management toolbar with search fo
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -1112,7 +1112,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search fo
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1120,7 +1120,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search fo
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -1137,7 +1137,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search in
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -1152,13 +1152,13 @@ exports[`ClayManagementToolbar should render a management toolbar with search in
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchName" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -1172,7 +1172,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search in
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1180,7 +1180,7 @@ exports[`ClayManagementToolbar should render a management toolbar with search in
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -1207,7 +1207,7 @@ exports[`ClayManagementToolbar should render a management toolbar with selection
       </li>
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -1222,13 +1222,13 @@ exports[`ClayManagementToolbar should render a management toolbar with selection
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -1242,7 +1242,7 @@ exports[`ClayManagementToolbar should render a management toolbar with selection
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1250,7 +1250,7 @@ exports[`ClayManagementToolbar should render a management toolbar with selection
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -1294,7 +1294,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -1309,13 +1309,13 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -1329,7 +1329,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1338,7 +1338,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
       <li class="dropdown nav-item">
         <div class="dropdown">
           <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled" type="button">
-            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
               <title>list</title>
               <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#list"></use>
             </svg>
@@ -1347,7 +1347,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
@@ -1361,7 +1361,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
     <li>
       <a class=" dropdown-item active">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
             <title>list</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#list"></use>
           </svg>
@@ -1370,7 +1370,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
     <li>
       <a class=" dropdown-item disabled" href="javascript:;">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-table" focusable="false">
             <title>table</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#table"></use>
           </svg>
@@ -1379,7 +1379,7 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
     <li>
       <a class=" dropdown-item">
         <div class="dropdown-item-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
             <title>cards2</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#cards2"></use>
           </svg>
@@ -1395,7 +1395,7 @@ exports[`ClayManagementToolbar should render the default markup 1`] = `
     <ul class="navbar-nav">
       <li class="nav-item">
         <button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow" focusable="false">
             <title>order-arrow</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow"></use>
           </svg>
@@ -1410,13 +1410,13 @@ exports[`ClayManagementToolbar should render the default markup 1`] = `
               <input aria-label="Search" class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." ref="search" type="text">
               <span class="input-group-inset-item input-group-inset-item-after">
                 <button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" 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>
                 <button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
-                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+                  <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
                     <title>search</title>
                     <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
                   </svg>
@@ -1430,7 +1430,7 @@ exports[`ClayManagementToolbar should render the default markup 1`] = `
     <ul class="navbar-nav">
       <li class="nav-item navbar-breakpoint-d-none">
         <button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-search" focusable="false">
             <title>search</title>
             <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#search"></use>
           </svg>
@@ -1438,7 +1438,7 @@ exports[`ClayManagementToolbar should render the default markup 1`] = `
       </li>
       <li class="nav-item">
         <button class="btn nav-btn nav-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="../node_modules/clay/lib/images/icons/icons.svg#plus"></use>
           </svg>
diff --git a/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.js.snap b/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.js.snap
index 096861611a..777c35fb55 100644
--- a/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.js.snap
+++ b/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.js.snap
@@ -7,7 +7,7 @@ exports[`ClayModal should render a modal opened 1`] = `
       <div class="modal-header">
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -28,7 +28,7 @@ exports[`ClayModal should render a modal opened using the method show 1`] = `
       <div class="modal-header">
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -49,7 +49,7 @@ exports[`ClayModal should render a modal opened using the method show 2`] = `
       <div class="modal-header">
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -143,7 +143,7 @@ exports[`ClayModal should render a modal with size \`full-screen\` 1`] = `
       <div class="modal-header">
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -164,7 +164,7 @@ exports[`ClayModal should render a modal with size \`large\` 1`] = `
       <div class="modal-header">
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -185,7 +185,7 @@ exports[`ClayModal should render a modal with size \`small\` 1`] = `
       <div class="modal-header">
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -205,14 +205,14 @@ exports[`ClayModal should render a modal with status \`danger\` and title 1`] =
     <div class="modal-content">
       <div class="modal-header">
         <span class="modal-title-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="icons.svg#exclamation-full"></use>
           </svg>
         </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -229,14 +229,14 @@ exports[`ClayModal should render a modal with status \`info\` and title 1`] = `
     <div class="modal-content">
       <div class="modal-header">
         <span class="modal-title-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="icons.svg#info-circle"></use>
           </svg>
         </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -253,14 +253,14 @@ exports[`ClayModal should render a modal with status \`success\` and title 1`] =
     <div class="modal-content">
       <div class="modal-header">
         <span class="modal-title-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle" focusable="false">
             <title>check-circle</title>
             <use xlink:href="icons.svg#check-circle"></use>
           </svg>
         </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -277,14 +277,14 @@ exports[`ClayModal should render a modal with status \`warning\` and title 1`] =
     <div class="modal-content">
       <div class="modal-header">
         <span class="modal-title-indicator">
-          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-question-circle-full">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-question-circle-full" focusable="false">
             <title>question-circle-full</title>
             <use xlink:href="icons.svg#question-circle-full"></use>
           </svg>
         </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
@@ -314,7 +314,7 @@ exports[`ClayModal should render a modal with title and header closing button 1`
       <div class="modal-header">
         <div class="modal-title">My title</div>
         <button class="btn close btn-unstyled" aria-label="times" 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="icons.svg#times"></use>
           </svg>
diff --git a/packages/clay-navigation-bar/src/__tests__/__snapshots__/ClayNavigationBar.js.snap b/packages/clay-navigation-bar/src/__tests__/__snapshots__/ClayNavigationBar.js.snap
index c7d07dab80..6940ffc3aa 100644
--- a/packages/clay-navigation-bar/src/__tests__/__snapshots__/ClayNavigationBar.js.snap
+++ b/packages/clay-navigation-bar/src/__tests__/__snapshots__/ClayNavigationBar.js.snap
@@ -4,7 +4,7 @@ exports[`ClayNavigationBar should render a navigatiom bar with classes 1`] = `
 <nav class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light my-custom-class">
   <div class="container">
     <a aria-expanded="false" aria-label="Toggle Navigation" class=" navbar-toggler navbar-toggler-link collapsed" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="icons.svg#caret-bottom"></use>
       </svg>
@@ -28,7 +28,7 @@ exports[`ClayNavigationBar should render a navigatiom bar with id 1`] = `
 <nav class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light" id="myId">
   <div class="container">
     <a aria-expanded="false" aria-label="Toggle Navigation" class=" navbar-toggler navbar-toggler-link collapsed" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="icons.svg#caret-bottom"></use>
       </svg>
@@ -52,7 +52,7 @@ exports[`ClayNavigationBar should render a navigatiom bar with more than one ele
 <nav class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light">
   <div class="container">
     <a aria-expanded="false" aria-label="Toggle Navigation" class=" navbar-toggler navbar-toggler-link collapsed" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="icons.svg#caret-bottom"></use>
       </svg>
@@ -81,7 +81,7 @@ exports[`ClayNavigationBar should render a navigatiom bar with one active elemen
 <nav class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light">
   <div class="container">
     <a aria-expanded="false" aria-label="Toggle Navigation" class=" navbar-toggler navbar-toggler-link collapsed" href="#">Page 1
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="icons.svg#caret-bottom"></use>
       </svg>
@@ -105,7 +105,7 @@ exports[`ClayNavigationBar should render a navigatiom bar with one element 1`] =
 <nav class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light">
   <div class="container">
     <a aria-expanded="false" aria-label="Toggle Navigation" class=" navbar-toggler navbar-toggler-link collapsed" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="icons.svg#caret-bottom"></use>
       </svg>
@@ -129,7 +129,7 @@ exports[`ClayNavigationBar should render an inverted colored navigatiom bar with
 <nav class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-secondary">
   <div class="container">
     <a aria-expanded="false" aria-label="Toggle Navigation" class=" navbar-toggler navbar-toggler-link collapsed" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="icons.svg#caret-bottom"></use>
       </svg>
diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap
index d653da8c5b..0dfa01d86e 100644
--- a/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap
+++ b/packages/clay-pagination-bar/src/__tests__/__snapshots__/ClayPaginationBar.js.snap
@@ -4,7 +4,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with baseHref 1`] =
 <div class="clay-pagination-bar pagination-bar">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -14,7 +14,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with baseHref 1`] =
   <ul class="clay-pagination pagination">
     <li class="page-item disabled">
       <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -28,7 +28,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with baseHref 1`] =
     </li>
     <li class="page-item">
       <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
@@ -58,7 +58,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with classes 1`] =
 <div class="clay-pagination-bar pagination-bar my-custom-class">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -68,7 +68,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with classes 1`] =
   <ul class="clay-pagination pagination">
     <li class="page-item disabled">
       <a aria-label="Previous Page" class=" page-link" href="#">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -82,7 +82,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with classes 1`] =
     </li>
     <li class="page-item">
       <a aria-label="Next Page" class=" page-link" href="#2">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
@@ -112,7 +112,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with id 1`] = `
 <div class="clay-pagination-bar pagination-bar" id="myId">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -122,7 +122,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with id 1`] = `
   <ul class="clay-pagination pagination">
     <li class="page-item disabled">
       <a aria-label="Previous Page" class=" page-link" href="#">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -136,7 +136,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with id 1`] = `
     </li>
     <li class="page-item">
       <a aria-label="Next Page" class=" page-link" href="#2">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
@@ -166,7 +166,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item less
 <div class="clay-pagination-bar pagination-bar">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -176,7 +176,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item less
   <ul class="clay-pagination pagination">
     <li class="page-item">
       <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -190,7 +190,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item less
     </li>
     <li class="page-item disabled">
       <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
@@ -220,7 +220,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item more
 <div class="clay-pagination-bar pagination-bar">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -230,7 +230,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item more
   <ul class="clay-pagination pagination">
     <li class="page-item">
       <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -247,7 +247,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item more
     </li>
     <li class="page-item">
       <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
@@ -277,7 +277,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item more
 <div class="clay-pagination-bar pagination-bar">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -287,7 +287,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item more
   <ul class="clay-pagination pagination">
     <li class="page-item">
       <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -304,7 +304,7 @@ exports[`ClayPaginationBar should render a ClayPaginationBar with one item more
     </li>
     <li class="page-item disabled">
       <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
@@ -334,7 +334,7 @@ exports[`ClayPaginationBar should render the default markup 1`] = `
 <div class="clay-pagination-bar pagination-bar">
   <div class="dropdown pagination-items-per-page">
     <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">10 Items
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom" focusable="false">
         <title>caret-bottom</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#caret-bottom"></use>
       </svg>
@@ -344,7 +344,7 @@ exports[`ClayPaginationBar should render the default markup 1`] = `
   <ul class="clay-pagination pagination">
     <li class="page-item disabled">
       <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
           <title>angle-left</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
         </svg>
@@ -358,7 +358,7 @@ exports[`ClayPaginationBar should render the default markup 1`] = `
     </li>
     <li class="page-item">
       <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
           <title>angle-right</title>
           <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
         </svg>
diff --git a/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap b/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap
index a7ad9f2fc8..695da41379 100644
--- a/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap
+++ b/packages/clay-pagination/src/__tests__/__snapshots__/ClayPagination.js.snap
@@ -4,7 +4,7 @@ exports[`ClayPagination should render a ClayPagination with 1 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -15,7 +15,7 @@ exports[`ClayPagination should render a ClayPagination with 1 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -28,7 +28,7 @@ exports[`ClayPagination should render a ClayPagination with 2 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -42,7 +42,7 @@ exports[`ClayPagination should render a ClayPagination with 2 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -55,7 +55,7 @@ exports[`ClayPagination should render a ClayPagination with 2 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -69,7 +69,7 @@ exports[`ClayPagination should render a ClayPagination with 2 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -82,7 +82,7 @@ exports[`ClayPagination should render a ClayPagination with 3 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -99,7 +99,7 @@ exports[`ClayPagination should render a ClayPagination with 3 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -112,7 +112,7 @@ exports[`ClayPagination should render a ClayPagination with 3 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -129,7 +129,7 @@ exports[`ClayPagination should render a ClayPagination with 3 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -142,7 +142,7 @@ exports[`ClayPagination should render a ClayPagination with 3 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -159,7 +159,7 @@ exports[`ClayPagination should render a ClayPagination with 3 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -172,7 +172,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -192,7 +192,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -205,7 +205,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -225,7 +225,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -238,7 +238,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -258,7 +258,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -271,7 +271,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -291,7 +291,7 @@ exports[`ClayPagination should render a ClayPagination with 4 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -304,7 +304,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -327,7 +327,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -340,7 +340,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -363,7 +363,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -376,7 +376,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -399,7 +399,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -412,7 +412,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -435,7 +435,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -448,7 +448,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -471,7 +471,7 @@ exports[`ClayPagination should render a ClayPagination with 5 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -484,7 +484,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -509,7 +509,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -537,7 +537,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -562,7 +562,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -587,7 +587,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -613,7 +613,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -626,7 +626,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -652,7 +652,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -665,7 +665,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -690,7 +690,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -715,7 +715,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -743,7 +743,7 @@ exports[`ClayPagination should render a ClayPagination with 6 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -765,7 +765,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -790,7 +790,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -821,7 +821,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -846,7 +846,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -874,7 +874,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -902,7 +902,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -927,7 +927,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -956,7 +956,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -969,7 +969,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -997,7 +997,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1022,7 +1022,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1047,7 +1047,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1075,7 +1075,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1103,7 +1103,7 @@ exports[`ClayPagination should render a ClayPagination with 7 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1128,7 +1128,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1153,7 +1153,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1187,7 +1187,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1212,7 +1212,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1243,7 +1243,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1271,7 +1271,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1299,7 +1299,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1330,7 +1330,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1355,7 +1355,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1386,7 +1386,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1411,7 +1411,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1439,7 +1439,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1467,7 +1467,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1492,7 +1492,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1523,7 +1523,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1551,7 +1551,7 @@ exports[`ClayPagination should render a ClayPagination with 8 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1579,7 +1579,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1604,7 +1604,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1641,7 +1641,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1666,7 +1666,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1700,7 +1700,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1728,7 +1728,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1759,7 +1759,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1790,7 +1790,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1818,7 +1818,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1851,7 +1851,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1888,7 +1888,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1919,7 +1919,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -1947,7 +1947,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -1975,7 +1975,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2006,7 +2006,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2031,7 +2031,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#9">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2065,7 +2065,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2093,7 +2093,7 @@ exports[`ClayPagination should render a ClayPagination with 9 total pages and pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2124,7 +2124,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2149,7 +2149,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2189,7 +2189,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2214,7 +2214,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2251,7 +2251,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2279,7 +2279,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2313,7 +2313,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2344,7 +2344,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2375,7 +2375,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2408,7 +2408,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2448,7 +2448,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2481,7 +2481,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2521,7 +2521,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2552,7 +2552,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2583,7 +2583,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2611,7 +2611,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#9">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2645,7 +2645,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2670,7 +2670,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#10">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2707,7 +2707,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#9">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2735,7 +2735,7 @@ exports[`ClayPagination should render a ClayPagination with 10 total pages and p
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2769,7 +2769,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 1 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2780,7 +2780,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 1 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2793,7 +2793,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 2 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2807,7 +2807,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 2 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2820,7 +2820,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 2 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2834,7 +2834,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 2 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2847,7 +2847,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2864,7 +2864,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2877,7 +2877,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2894,7 +2894,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2907,7 +2907,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2924,7 +2924,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 3 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2937,7 +2937,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2957,7 +2957,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -2970,7 +2970,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -2990,7 +2990,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3003,7 +3003,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3023,7 +3023,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3036,7 +3036,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3056,7 +3056,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 4 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3069,7 +3069,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3092,7 +3092,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3105,7 +3105,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3128,7 +3128,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3141,7 +3141,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3164,7 +3164,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3177,7 +3177,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3200,7 +3200,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3213,7 +3213,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3236,7 +3236,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 5 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3249,7 +3249,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3274,7 +3274,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3302,7 +3302,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3327,7 +3327,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3352,7 +3352,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3378,7 +3378,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3391,7 +3391,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3417,7 +3417,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3430,7 +3430,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3455,7 +3455,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3480,7 +3480,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3508,7 +3508,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 6 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3530,7 +3530,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3555,7 +3555,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3586,7 +3586,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3611,7 +3611,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3639,7 +3639,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3667,7 +3667,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3692,7 +3692,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3721,7 +3721,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3734,7 +3734,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3762,7 +3762,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3787,7 +3787,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3812,7 +3812,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3840,7 +3840,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3868,7 +3868,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 7 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3893,7 +3893,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3918,7 +3918,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -3952,7 +3952,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -3977,7 +3977,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4008,7 +4008,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4036,7 +4036,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4064,7 +4064,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4095,7 +4095,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4120,7 +4120,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4151,7 +4151,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4176,7 +4176,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4204,7 +4204,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4232,7 +4232,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4257,7 +4257,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4288,7 +4288,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4316,7 +4316,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 8 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4344,7 +4344,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4369,7 +4369,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4406,7 +4406,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4431,7 +4431,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4465,7 +4465,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4493,7 +4493,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4524,7 +4524,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4555,7 +4555,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4583,7 +4583,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4616,7 +4616,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4653,7 +4653,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4684,7 +4684,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4712,7 +4712,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4740,7 +4740,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4771,7 +4771,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4796,7 +4796,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=9">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4830,7 +4830,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4858,7 +4858,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 9 total pa
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4889,7 +4889,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4914,7 +4914,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -4954,7 +4954,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=1">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -4979,7 +4979,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5016,7 +5016,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5044,7 +5044,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5078,7 +5078,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=3">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5109,7 +5109,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5140,7 +5140,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=4">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5173,7 +5173,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5213,7 +5213,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=5">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5246,7 +5246,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5286,7 +5286,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=6">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5317,7 +5317,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5348,7 +5348,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=7">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5376,7 +5376,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=9">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5410,7 +5410,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=8">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5435,7 +5435,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=10">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5472,7 +5472,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
 <ul class="clay-pagination pagination">
   <li class="page-item">
     <a aria-label="Previous Page" class=" page-link" href="#mySite?curPage=9">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5500,7 +5500,7 @@ exports[`ClayPagination should render a ClayPagination with baseHref, 10 total p
   </li>
   <li class="page-item disabled">
     <a aria-label="Next Page" class=" page-link" href="#mySite?curPage=">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5534,7 +5534,7 @@ exports[`ClayPagination should render a ClayPagination with classes 1`] = `
 <ul class="clay-pagination pagination my-custom-class">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5559,7 +5559,7 @@ exports[`ClayPagination should render a ClayPagination with classes 1`] = `
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5599,7 +5599,7 @@ exports[`ClayPagination should render a ClayPagination with id 1`] = `
 <ul class="clay-pagination pagination" id="myId">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5624,7 +5624,7 @@ exports[`ClayPagination should render a ClayPagination with id 1`] = `
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
@@ -5664,7 +5664,7 @@ exports[`ClayPagination should render the default markup 1`] = `
 <ul class="clay-pagination pagination">
   <li class="page-item disabled">
     <a aria-label="Previous Page" class=" page-link" href="#">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-left" focusable="false">
         <title>angle-left</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-left"></use>
       </svg>
@@ -5689,7 +5689,7 @@ exports[`ClayPagination should render the default markup 1`] = `
   </li>
   <li class="page-item">
     <a aria-label="Next Page" class=" page-link" href="#2">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-angle-right" focusable="false">
         <title>angle-right</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#angle-right"></use>
       </svg>
diff --git a/packages/clay-progress-bar/src/__tests__/__snapshots__/ClayProgressBar.js.snap b/packages/clay-progress-bar/src/__tests__/__snapshots__/ClayProgressBar.js.snap
index 6c61a5844f..9babe181bb 100644
--- a/packages/clay-progress-bar/src/__tests__/__snapshots__/ClayProgressBar.js.snap
+++ b/packages/clay-progress-bar/src/__tests__/__snapshots__/ClayProgressBar.js.snap
@@ -7,7 +7,7 @@ exports[`ClayProgressBar should render a completed progress bar 1`] = `
   </div>
   <div class="progress-group-addon">
     <div class="progress-group-feedback">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle" focusable="false">
         <title>check-circle</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle"></use>
       </svg>
@@ -23,7 +23,7 @@ exports[`ClayProgressBar should render a completed progress bar 2`] = `
   </div>
   <div class="progress-group-addon">
     <div class="progress-group-feedback">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle">
+      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle" focusable="false">
         <title>check-circle</title>
         <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle"></use>
       </svg>
diff --git a/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap b/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap
index 8c3974992b..5e2800bf3d 100644
--- a/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap
+++ b/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap
@@ -99,7 +99,7 @@ exports[`ClaySticker should render a sticker with classes 1`] = `
 exports[`ClaySticker should render a sticker with icon 1`] = `
 <span class="sticker sticker-primary">
   <span class="sticker-overlay">
-    <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>
diff --git a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap
index 6ce9fa09d4..2419bcc8d4 100644
--- a/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap
+++ b/packages/clay-table/src/__tests__/__snapshots__/ClayTable.js.snap
@@ -351,7 +351,7 @@ exports[`ClayTable should render a ClayTable with a basic schema with sortable f
         <th class="table-cell-expand">
           <button class="btn btn-unstyled" type="button">Name
             <span class="inline-item inline-item-after">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false">
                 <title>order-arrow-up</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#order-arrow-up"></use>
               </svg>
@@ -928,7 +928,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           <div class="quick-action-menu"></div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -948,7 +948,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           <div class="quick-action-menu"></div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -1004,13 +1004,13 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
         <td>
           <div class="quick-action-menu">
             <a aria-label="Remove" class=" quick-action-item" href="#1">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                 <title>trash</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
               </svg>
             </a>
             <a aria-label="Download" class=" quick-action-item" href="#2">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                 <title>download</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
               </svg>
@@ -1018,7 +1018,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           </div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -1037,13 +1037,13 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
         <td>
           <div class="quick-action-menu">
             <a aria-label="Remove" class=" quick-action-item" href="#1">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                 <title>trash</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
               </svg>
             </a>
             <a aria-label="Download" class=" quick-action-item" href="#2">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                 <title>download</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
               </svg>
@@ -1051,7 +1051,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           </div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -1070,13 +1070,13 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
         <td>
           <div class="quick-action-menu">
             <a aria-label="Remove" class=" quick-action-item" href="#1">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                 <title>trash</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
               </svg>
             </a>
             <a aria-label="Download" class=" quick-action-item" href="#2">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                 <title>download</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
               </svg>
@@ -1084,7 +1084,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           </div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -1103,13 +1103,13 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
         <td>
           <div class="quick-action-menu">
             <a aria-label="Remove" class=" quick-action-item" href="#1">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                 <title>trash</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
               </svg>
             </a>
             <a aria-label="Download" class=" quick-action-item" href="#2">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                 <title>download</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
               </svg>
@@ -1117,7 +1117,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           </div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -1136,13 +1136,13 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
         <td>
           <div class="quick-action-menu">
             <a aria-label="Remove" class=" quick-action-item" href="#1">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                 <title>trash</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
               </svg>
             </a>
             <a aria-label="Download" class=" quick-action-item" href="#2">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                 <title>download</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
               </svg>
@@ -1150,7 +1150,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           </div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>
@@ -1169,13 +1169,13 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
         <td>
           <div class="quick-action-menu">
             <a aria-label="Remove" class=" quick-action-item" href="#1">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-trash" focusable="false">
                 <title>trash</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#trash"></use>
               </svg>
             </a>
             <a aria-label="Download" class=" quick-action-item" href="#2">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-download" focusable="false">
                 <title>download</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#download"></use>
               </svg>
@@ -1183,7 +1183,7 @@ exports[`ClayTable should render a ClayTable with an schema, items and action me
           </div>
           <div class="dropdown dropdown-action">
             <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn btn-unstyled" type="button">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
+              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
                 <title>ellipsis-v</title>
                 <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#ellipsis-v"></use>
               </svg>