fix(codeinput): upgrade codeinput a11y

momentum-design · Aug 23, 2024 · aa55a45 · aa55a45
1 parent eb8a5f2
commit aa55a45
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -140,7 +140,7 @@
     "react-focus-lock": "^1.19.1",
     "react-toastify": "^9.0.8",
     "react-uid": "^2.2.0",
-    "react-verification-input": "^2.0.1",
+    "react-verification-input": "^4.1.2",
     "sass": "1.49.9",
     "ts-loader": "^8.2.0",
     "typescript": "^4.3.5",

diff --git a/src/components/CodeInput/CodeInput.constants.ts b/src/components/CodeInput/CodeInput.constants.ts
@@ -2,6 +2,7 @@ const CLASS_PREFIX = 'md-code-input';
 
 const STYLE = {
   wrapper: `${CLASS_PREFIX}-wrapper`,
+  input: `${CLASS_PREFIX}-input`,
   container: `${CLASS_PREFIX}-container`,
   character: `${CLASS_PREFIX}-character`,
   characterInactive: `${CLASS_PREFIX}-character--inactive`,

diff --git a/src/components/CodeInput/CodeInput.style.scss b/src/components/CodeInput/CodeInput.style.scss
@@ -1,5 +1,18 @@
 .md-code-input-wrapper {
+  &:focus {
+    box-shadow: none;
+  }
   .md-code-input-container {
+    height: 100%;
+    width: 100%;
+    &:focus {
+      box-shadow: none;
+    }
+    .md-code-input-input {
+      &:focus {
+        box-shadow: none
+      }
+    }
     .md-code-input-character {
       flex: auto;
       cursor: text;

diff --git a/src/components/CodeInput/CodeInput.tsx b/src/components/CodeInput/CodeInput.tsx
@@ -57,6 +57,10 @@ const CodeInput: React.FC<Props> = (props: Props): ReactElement => {
           id: inputId,
           name: inputId,
           disabled,
+          className: classnames(STYLE.input),
+        }}
+        containerProps={{
+          className: classnames(STYLE.container),
         }}
         length={numDigits}
         onChange={setValue}
@@ -69,11 +73,9 @@ const CodeInput: React.FC<Props> = (props: Props): ReactElement => {
           }
         }}
         value={value}
-        removeDefaultStyles={true}
         validChars="0-9"
         placeholder=""
         classNames={{
-          container: STYLE.container,
           character: STYLE.character,
           characterInactive: STYLE.characterInactive,
           characterSelected: STYLE.characterSelected,

diff --git a/src/components/CodeInput/CodeInput.unit.test.tsx.snap b/src/components/CodeInput/CodeInput.unit.test.tsx.snap
@@ -15,14 +15,18 @@ exports[`CodeInput snapshot should match snapshot 1`] = `
           "character": "md-code-input-character",
           "characterInactive": "md-code-input-character--inactive",
           "characterSelected": "md-code-input-character--selected",
-          "container": "md-code-input-container",
         }
       }
-      debug={false}
+      containerProps={
+        Object {
+          "className": "md-code-input-container",
+        }
+      }
       inputProps={
         Object {
           "aria-describedby": undefined,
           "aria-label": undefined,
+          "className": "md-code-input-input",
           "disabled": false,
           "id": undefined,
           "name": undefined,
@@ -32,145 +36,137 @@ exports[`CodeInput snapshot should match snapshot 1`] = `
       onChange={[Function]}
       onFocus={[Function]}
       placeholder=""
-      removeDefaultStyles={true}
       validChars="0-9"
       value=""
     >
       <div
-        className="vi__wrapper"
+        className="vi__container md-code-input-container"
+        data-testid="container"
+        onClick={[Function]}
       >
         <input
-          className="vi"
+          className="vi md-code-input-input"
           disabled={false}
           onBlur={[Function]}
           onChange={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
+          onSelect={[Function]}
+          spellCheck={false}
           value=""
         />
         <div
-          className="vi__container md-code-input-container"
-          data-testid="container"
+          className="vi__character md-code-input-character"
+          data-testid="character-0"
+          id="field-0"
+          key="0"
           onClick={[Function]}
-        >
-          <div
-            className="vi__character md-code-input-character"
-            data-testid="character-0"
-            id="field-0"
-            key="0"
-            onClick={[Function]}
-          />
-          <div
-            className="vi__character md-code-input-character md-code-input-character--inactive"
-            data-testid="character-1"
-            id="field-1"
-            key="1"
-            onClick={[Function]}
-          />
-          <div
-            className="vi__character md-code-input-character md-code-input-character--inactive"
-            data-testid="character-2"
-            id="field-2"
-            key="2"
-            onClick={[Function]}
-          />
-          <div
-            className="vi__character md-code-input-character md-code-input-character--inactive"
-            data-testid="character-3"
-            id="field-3"
-            key="3"
-            onClick={[Function]}
-          />
-          <div
-            className="vi__character md-code-input-character md-code-input-character--inactive"
-            data-testid="character-4"
-            id="field-4"
-            key="4"
-            onClick={[Function]}
-          />
-          <div
-            className="vi__character md-code-input-character md-code-input-character--inactive"
-            data-testid="character-5"
-            id="field-5"
-            key="5"
-            onClick={[Function]}
-          />
-        </div>
-        <style
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": Array [
-                Array [
-                  28,
-                  ".vi__wrapper {
-  position: relative;
-}
-
-.vi {
-  height: 100%;
+        />
+        <div
+          className="vi__character md-code-input-character vi__character--inactive md-code-input-character--inactive"
+          data-testid="character-1"
+          id="field-1"
+          key="1"
+          onClick={[Function]}
+        />
+        <div
+          className="vi__character md-code-input-character vi__character--inactive md-code-input-character--inactive"
+          data-testid="character-2"
+          id="field-2"
+          key="2"
+          onClick={[Function]}
+        />
+        <div
+          className="vi__character md-code-input-character vi__character--inactive md-code-input-character--inactive"
+          data-testid="character-3"
+          id="field-3"
+          key="3"
+          onClick={[Function]}
+        />
+        <div
+          className="vi__character md-code-input-character vi__character--inactive md-code-input-character--inactive"
+          data-testid="character-4"
+          id="field-4"
+          key="4"
+          onClick={[Function]}
+        />
+        <div
+          className="vi__character md-code-input-character vi__character--inactive md-code-input-character--inactive"
+          data-testid="character-5"
+          id="field-5"
+          key="5"
+          onClick={[Function]}
+        />
+      </div>
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Array [
+              Array [
+                28,
+                ".vi {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   box-sizing: border-box;
   position: absolute;
-  left: -2000px;
-  opacity: 0;
-  transform: scale(0);
+  color: transparent;
+  background: transparent;
+  caret-color: transparent;
+  outline: none;
+  border: 0 none transparent;
 }
 
-.vi--debug {
-  left: 0;
-  bottom: -70px;
-  opacity: 1;
-  transform: scale(1);
+.vi::-ms-reveal,
+.vi::-ms-clear {
+  display: none;
 }
 
-.vi__container {
-  display: flex;
+.vi::selection {
+  background: transparent;
 }
 
-.vi__container--default {
+/* :where() gives the styles specificity 0, which makes them overridable */
+:where(.vi__container) {
+  position: relative;
+  display: flex;
+  gap: 8px;
   height: 50px;
   width: 300px;
 }
 
-.vi__character {
+:where(.vi__character) {
   height: 100%;
   flex-grow: 1;
   flex-basis: 0;
   text-align: center;
-}
-
-.vi__character--default {
   font-size: 36px;
   line-height: 50px;
   color: black;
   background-color: white;
-  margin-left: 8px;
   border: 1px solid black;
   cursor: default;
   user-select: none;
   box-sizing: border-box;
 }
 
-.vi__character--default:first-child {
-  margin-left: 0;
-}
-
-.vi__character--inactive--default {
+:where(.vi__character--inactive) {
   color: dimgray;
   background-color: lightgray;
 }
 
-.vi__character--selected--default {
+:where(.vi__character--selected) {
   outline: 2px solid cornflowerblue;
   color: cornflowerblue;
 }
 ",
-                  "",
-                ],
+                "",
               ],
-            }
+            ],
           }
-        />
-      </div>
+        }
+      />
     </VerificationInput>
     <div
       className="md-code-input__messages"

diff --git a/yarn.lock b/yarn.lock
@@ -2609,7 +2609,7 @@ __metadata:
     react-test-renderer: ^16.8.0
     react-toastify: ^9.0.8
     react-uid: ^2.2.0
-    react-verification-input: ^2.0.1
+    react-verification-input: ^4.1.2
     react-virtualized: ^9.21.0
     react-virtualized-auto-sizer: ^1.0.2
     react-window: ^1.8.1
@@ -23793,13 +23793,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-verification-input@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "react-verification-input@npm:2.0.1"
+"react-verification-input@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "react-verification-input@npm:4.1.2"
   peerDependencies:
-    react: 16.8.0 - 17.x.x
-    react-dom: 16.8.0 - 17.x.x
-  checksum: 1d9caef7567b230b90d21657fe592c20954b6219a5e2acdd3ffee184a5a2a6c0f6bec04a924e5e4d326d6efe1418a1e18820810aec9f5bebd3856e1d44346986
+    react: 16.8.0 - 18.x.x
+    react-dom: 16.8.0 - 18.x.x
+  checksum: 269abcb05bf74dbfcb0cb2428d0f29343063f90ba9eea81679ab52c64982230be7af20ff3cce5e60454d895ce900432baf0ae843a723a59fabc76cfe0e0462bb
   languageName: node
   linkType: hard