Add focusable=false to svgs

LatitudeFinancialOSS · Jan 30, 2020 · bdb73ca · bdb73ca
1 parent 66f75c6
commit bdb73ca
Show file tree

Hide file tree

Showing 43 changed files with 48 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}