From bdb73cae6f1b2d26b97d316fad7321b387b8b1e6 Mon Sep 17 00:00:00 2001
From: Misha Moroshko <michael.moroshko@gmail.com>
Date: Thu, 30 Jan 2020 12:40:52 +1100
Subject: [PATCH] Add focusable=false to svgs

---
 src/components/Checkbox.js              | 7 ++++++-
 src/components/LoadingIcon.js           | 1 +
 src/components/RadioGroup.js            | 1 +
 src/icons/arrow-back.js                 | 1 +
 src/icons/arrow-forward.js              | 1 +
 src/icons/birthday.js                   | 1 +
 src/icons/calculator.js                 | 1 +
 src/icons/chevron-down.js               | 1 +
 src/icons/chevron-left.js               | 1 +
 src/icons/chevron-right.js              | 1 +
 src/icons/chevron-up.js                 | 1 +
 src/icons/comparison.js                 | 1 +
 src/icons/cross-small.js                | 1 +
 src/icons/cross.js                      | 1 +
 src/icons/download.js                   | 1 +
 src/icons/edit.js                       | 1 +
 src/icons/external-link.js              | 1 +
 src/icons/eye-hidden.js                 | 1 +
 src/icons/eye-visible.js                | 1 +
 src/icons/face-id.js                    | 1 +
 src/icons/fingerprint.js                | 1 +
 src/icons/hamburger.js                  | 1 +
 src/icons/lock-small.js                 | 1 +
 src/icons/lock.js                       | 1 +
 src/icons/mail.js                       | 1 +
 src/icons/message.js                    | 1 +
 src/icons/notification-new.js           | 1 +
 src/icons/notification.js               | 1 +
 src/icons/overflow-menu.js              | 1 +
 src/icons/person.js                     | 1 +
 src/icons/question.js                   | 1 +
 src/icons/search.js                     | 1 +
 src/icons/shield.js                     | 1 +
 src/icons/stopwatch-alt.js              | 1 +
 src/icons/stopwatch.js                  | 1 +
 src/icons/tick-small.js                 | 1 +
 src/icons/tick.js                       | 1 +
 src/icons/time.js                       | 1 +
 src/icons/triangle-down.js              | 1 +
 src/icons/triangle-up.js                | 1 +
 src/logos/gem.js                        | 1 +
 src/logos/latitude.js                   | 1 +
 website/src/components/icons/inspect.js | 1 +
 43 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index b073f559..2812c0d7 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -38,7 +38,12 @@ function CheckboxIcon({ color, isChecked }) {
   const theme = useTheme();
 
   return (
-    <svg css={theme.checkboxIcon} viewBox="0 0 100 100" aria-hidden="true">
+    <svg
+      css={theme.checkboxIcon}
+      viewBox="0 0 100 100"
+      focusable="false"
+      aria-hidden="true"
+    >
       <rect
         css={theme[`checkboxIcon.${color}`]}
         width="100"
diff --git a/src/components/LoadingIcon.js b/src/components/LoadingIcon.js
index 48d1abd4..a649e36a 100644
--- a/src/components/LoadingIcon.js
+++ b/src/components/LoadingIcon.js
@@ -128,6 +128,7 @@ function LoadingIcon(_props) {
       width={svgSize}
       height={svgSize}
       viewBox={`0 0 ${svgSize} ${svgSize}`}
+      focusable="false"
       role="img"
       aria-label="Loading icon"
       data-testid={testId}
diff --git a/src/components/RadioGroup.js b/src/components/RadioGroup.js
index c8166616..28f77223 100644
--- a/src/components/RadioGroup.js
+++ b/src/components/RadioGroup.js
@@ -44,6 +44,7 @@ function RadioCircle({ color, isChecked }) {
     <svg
       css={theme.radioGroupRadioCircle}
       viewBox="0 0 24 24"
+      focusable="false"
       aria-hidden="true"
     >
       <circle
diff --git a/src/icons/arrow-back.js b/src/icons/arrow-back.js
index bd2588f4..d5af8dfa 100644
--- a/src/icons/arrow-back.js
+++ b/src/icons/arrow-back.js
@@ -7,6 +7,7 @@ function ArrowBack({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Arrow back"
       data-testid={testId}
diff --git a/src/icons/arrow-forward.js b/src/icons/arrow-forward.js
index 471db2f2..f70afb74 100644
--- a/src/icons/arrow-forward.js
+++ b/src/icons/arrow-forward.js
@@ -7,6 +7,7 @@ function ArrowForward({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Arrow forward"
       data-testid={testId}
diff --git a/src/icons/birthday.js b/src/icons/birthday.js
index 4ab087b6..57345da3 100644
--- a/src/icons/birthday.js
+++ b/src/icons/birthday.js
@@ -7,6 +7,7 @@ function Birthday({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Birthday"
       data-testid={testId}
diff --git a/src/icons/calculator.js b/src/icons/calculator.js
index 42325c51..dd684043 100644
--- a/src/icons/calculator.js
+++ b/src/icons/calculator.js
@@ -7,6 +7,7 @@ function Calculator({ primaryColor, testId }) {
       width="32"
       height="32"
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Calculator"
       data-testid={testId}
diff --git a/src/icons/chevron-down.js b/src/icons/chevron-down.js
index 0510aff0..a115e7c2 100644
--- a/src/icons/chevron-down.js
+++ b/src/icons/chevron-down.js
@@ -7,6 +7,7 @@ function ChevronDown({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Chevron down"
       data-testid={testId}
diff --git a/src/icons/chevron-left.js b/src/icons/chevron-left.js
index 415f8233..fc2cc8af 100644
--- a/src/icons/chevron-left.js
+++ b/src/icons/chevron-left.js
@@ -7,6 +7,7 @@ function ChevronLeft({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Chevron left"
       data-testid={testId}
diff --git a/src/icons/chevron-right.js b/src/icons/chevron-right.js
index 4d4db97a..6b27742d 100644
--- a/src/icons/chevron-right.js
+++ b/src/icons/chevron-right.js
@@ -7,6 +7,7 @@ function ChevronRight({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Chevron right"
       data-testid={testId}
diff --git a/src/icons/chevron-up.js b/src/icons/chevron-up.js
index 43667ac2..447c33bc 100644
--- a/src/icons/chevron-up.js
+++ b/src/icons/chevron-up.js
@@ -7,6 +7,7 @@ function ChevronUp({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Chevron up"
       data-testid={testId}
diff --git a/src/icons/comparison.js b/src/icons/comparison.js
index 10cdb76d..18a4f8ef 100644
--- a/src/icons/comparison.js
+++ b/src/icons/comparison.js
@@ -7,6 +7,7 @@ function Comparison({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Comparison"
       data-testid={testId}
diff --git a/src/icons/cross-small.js b/src/icons/cross-small.js
index 769ae048..95a2b220 100644
--- a/src/icons/cross-small.js
+++ b/src/icons/cross-small.js
@@ -7,6 +7,7 @@ function CrossSmall({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Cross small"
       data-testid={testId}
diff --git a/src/icons/cross.js b/src/icons/cross.js
index 4157ed6a..fc2347c1 100644
--- a/src/icons/cross.js
+++ b/src/icons/cross.js
@@ -7,6 +7,7 @@ function Cross({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Cross"
       data-testid={testId}
diff --git a/src/icons/download.js b/src/icons/download.js
index e9544c42..8d81a438 100644
--- a/src/icons/download.js
+++ b/src/icons/download.js
@@ -7,6 +7,7 @@ function Download({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Download"
       data-testid={testId}
diff --git a/src/icons/edit.js b/src/icons/edit.js
index 1b72f62d..a2c9d448 100644
--- a/src/icons/edit.js
+++ b/src/icons/edit.js
@@ -7,6 +7,7 @@ function Edit({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Edit"
       data-testid={testId}
diff --git a/src/icons/external-link.js b/src/icons/external-link.js
index cb384d15..9a50ec76 100644
--- a/src/icons/external-link.js
+++ b/src/icons/external-link.js
@@ -7,6 +7,7 @@ function ExternalLink({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="External link"
       data-testid={testId}
diff --git a/src/icons/eye-hidden.js b/src/icons/eye-hidden.js
index de5c7828..23921889 100644
--- a/src/icons/eye-hidden.js
+++ b/src/icons/eye-hidden.js
@@ -7,6 +7,7 @@ function EyeHidden({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Eye hidden"
       data-testid={testId}
diff --git a/src/icons/eye-visible.js b/src/icons/eye-visible.js
index 7f2c0edc..41f1b709 100644
--- a/src/icons/eye-visible.js
+++ b/src/icons/eye-visible.js
@@ -7,6 +7,7 @@ function EyeVisible({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Eye visible"
       data-testid={testId}
diff --git a/src/icons/face-id.js b/src/icons/face-id.js
index 3427647c..11bd05be 100644
--- a/src/icons/face-id.js
+++ b/src/icons/face-id.js
@@ -7,6 +7,7 @@ function FaceID({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Face ID"
       data-testid={testId}
diff --git a/src/icons/fingerprint.js b/src/icons/fingerprint.js
index e9d24c40..a6a311ca 100644
--- a/src/icons/fingerprint.js
+++ b/src/icons/fingerprint.js
@@ -7,6 +7,7 @@ function Fingerprint({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Fingerprint"
       data-testid={testId}
diff --git a/src/icons/hamburger.js b/src/icons/hamburger.js
index d71bbc33..6f0f2fe8 100644
--- a/src/icons/hamburger.js
+++ b/src/icons/hamburger.js
@@ -7,6 +7,7 @@ function Hamburger({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Hamburger"
       data-testid={testId}
diff --git a/src/icons/lock-small.js b/src/icons/lock-small.js
index 91765eca..b019ff95 100644
--- a/src/icons/lock-small.js
+++ b/src/icons/lock-small.js
@@ -7,6 +7,7 @@ function LockSmall({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Lock small"
       data-testid={testId}
diff --git a/src/icons/lock.js b/src/icons/lock.js
index 6813b080..c7abec01 100644
--- a/src/icons/lock.js
+++ b/src/icons/lock.js
@@ -7,6 +7,7 @@ function Lock({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Lock"
       data-testid={testId}
diff --git a/src/icons/mail.js b/src/icons/mail.js
index 8de816cc..6c96bbd9 100644
--- a/src/icons/mail.js
+++ b/src/icons/mail.js
@@ -7,6 +7,7 @@ function Mail({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Mail"
       data-testid={testId}
diff --git a/src/icons/message.js b/src/icons/message.js
index 32566f8a..1a0e8415 100644
--- a/src/icons/message.js
+++ b/src/icons/message.js
@@ -7,6 +7,7 @@ function Message({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Message"
       data-testid={testId}
diff --git a/src/icons/notification-new.js b/src/icons/notification-new.js
index f2656c60..f4678ead 100644
--- a/src/icons/notification-new.js
+++ b/src/icons/notification-new.js
@@ -7,6 +7,7 @@ function NotificationNew({ primaryColor, secondaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Notification new"
       data-testid={testId}
diff --git a/src/icons/notification.js b/src/icons/notification.js
index a3f55e1e..85cada3e 100644
--- a/src/icons/notification.js
+++ b/src/icons/notification.js
@@ -7,6 +7,7 @@ function Notification({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Notification"
       data-testid={testId}
diff --git a/src/icons/overflow-menu.js b/src/icons/overflow-menu.js
index abdc8af9..5d5ddbab 100644
--- a/src/icons/overflow-menu.js
+++ b/src/icons/overflow-menu.js
@@ -7,6 +7,7 @@ function OverflowMenu({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Overflow menu"
       data-testid={testId}
diff --git a/src/icons/person.js b/src/icons/person.js
index 84afeab7..127d3f50 100644
--- a/src/icons/person.js
+++ b/src/icons/person.js
@@ -7,6 +7,7 @@ function Person({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Person"
       data-testid={testId}
diff --git a/src/icons/question.js b/src/icons/question.js
index b86b8249..bb10aa18 100644
--- a/src/icons/question.js
+++ b/src/icons/question.js
@@ -7,6 +7,7 @@ function Question({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Question"
       data-testid={testId}
diff --git a/src/icons/search.js b/src/icons/search.js
index 64769127..d97814b0 100644
--- a/src/icons/search.js
+++ b/src/icons/search.js
@@ -7,6 +7,7 @@ function Search({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Search"
       data-testid={testId}
diff --git a/src/icons/shield.js b/src/icons/shield.js
index d5d2b8ba..1913a5b4 100644
--- a/src/icons/shield.js
+++ b/src/icons/shield.js
@@ -7,6 +7,7 @@ function Shield({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Shield"
       data-testid={testId}
diff --git a/src/icons/stopwatch-alt.js b/src/icons/stopwatch-alt.js
index 9b63b4e0..c6330f40 100644
--- a/src/icons/stopwatch-alt.js
+++ b/src/icons/stopwatch-alt.js
@@ -7,6 +7,7 @@ function StopwatchAlt({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Stopwatch alt"
       data-testid={testId}
diff --git a/src/icons/stopwatch.js b/src/icons/stopwatch.js
index 61559dd8..e9eb51a7 100644
--- a/src/icons/stopwatch.js
+++ b/src/icons/stopwatch.js
@@ -7,6 +7,7 @@ function Stopwatch({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Stopwatch"
       data-testid={testId}
diff --git a/src/icons/tick-small.js b/src/icons/tick-small.js
index 61f13cb1..5d12bab3 100644
--- a/src/icons/tick-small.js
+++ b/src/icons/tick-small.js
@@ -7,6 +7,7 @@ function TickSmall({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Tick small"
       data-testid={testId}
diff --git a/src/icons/tick.js b/src/icons/tick.js
index a1e9d3b5..e881184c 100644
--- a/src/icons/tick.js
+++ b/src/icons/tick.js
@@ -7,6 +7,7 @@ function Tick({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Tick"
       data-testid={testId}
diff --git a/src/icons/time.js b/src/icons/time.js
index 87631578..d960bc24 100644
--- a/src/icons/time.js
+++ b/src/icons/time.js
@@ -7,6 +7,7 @@ function Time({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Time"
       data-testid={testId}
diff --git a/src/icons/triangle-down.js b/src/icons/triangle-down.js
index 7c99a434..033e2491 100644
--- a/src/icons/triangle-down.js
+++ b/src/icons/triangle-down.js
@@ -7,6 +7,7 @@ function TriangleDown({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Triangle down"
       data-testid={testId}
diff --git a/src/icons/triangle-up.js b/src/icons/triangle-up.js
index c795f375..d58fefc5 100644
--- a/src/icons/triangle-up.js
+++ b/src/icons/triangle-up.js
@@ -7,6 +7,7 @@ function TriangleUp({ primaryColor, testId }) {
       width={32}
       height={32}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Triangle up"
       data-testid={testId}
diff --git a/src/logos/gem.js b/src/logos/gem.js
index 6f1fa90a..03fd83af 100644
--- a/src/logos/gem.js
+++ b/src/logos/gem.js
@@ -35,6 +35,7 @@ function GemLogo(_props) {
         ...responsivePropsCSS
       }}
       viewBox="0 0 548.23 233.65"
+      focusable="false"
       role="img"
       aria-label="Gem by Latitude logo"
       data-testid={testId}
diff --git a/src/logos/latitude.js b/src/logos/latitude.js
index e378c02c..fe317161 100644
--- a/src/logos/latitude.js
+++ b/src/logos/latitude.js
@@ -35,6 +35,7 @@ function LatitudeLogo(_props) {
         ...responsivePropsCSS
       }}
       viewBox="0 0 197 32"
+      focusable="false"
       role="img"
       aria-label="Latitude logo"
       data-testid={testId}
diff --git a/website/src/components/icons/inspect.js b/website/src/components/icons/inspect.js
index 6ecad068..e148c8ad 100644
--- a/website/src/components/icons/inspect.js
+++ b/website/src/components/icons/inspect.js
@@ -11,6 +11,7 @@ function InspectIcon(props) {
       width={24}
       height={24}
       viewBox="0 0 32 32"
+      focusable="false"
       role="img"
       aria-label="Inspect components"
       fill={color}