Close unclosed tags and more (#971)

I ran [`lit-analyzer`](https://github.com/runem/lit-analyzer) locally, which spotted a few issues with the code. Those issues are fixed here. We can't however add `lit-analyzer` to our pipeline just yet because of some issues: * runem/lit-analyzer#284 * runem/lit-analyzer#283
dfinity · Oct 28, 2022 · a7e5eec · a7e5eec
1 parent 0f9e1aa
commit a7e5eec
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 30 deletions.
diff --git a/screenshots/desktop/showVerificationCode.png b/screenshots/desktop/showVerificationCode.png
diff --git a/screenshots/mobile/showVerificationCode.png b/screenshots/mobile/showVerificationCode.png
diff --git a/src/frontend/src/components/anchorInput.ts b/src/frontend/src/components/anchorInput.ts
@@ -1,6 +1,7 @@
 import { html, TemplateResult } from "lit-html";
 import { withRef } from "../utils/utils";
 import { createRef, ref, Ref } from "lit-html/directives/ref.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 import { DirectiveResult } from "lit-html/directive.js";
 import { parseUserNumber } from "../utils/userNumber";
 
@@ -106,7 +107,7 @@ export const mkAnchorInput = ({
         id="${inputId}"
         class="c-input c-input--vip"
         placeholder="Enter anchor"
-        value="${userNumber}"
+        value="${ifDefined(userNumber?.toString())}"
         @input=${inputFilter(isDigits, onBadInput)}
         @keydown=${inputFilter(isDigits, onBadInput)}
         @keyup=${inputFilter(isDigits, onBadInput)}

diff --git a/src/frontend/src/components/warnBox.ts b/src/frontend/src/components/warnBox.ts
@@ -20,7 +20,7 @@ export const warnBox = ({
   htmlElement = "aside",
 }: warnBoxProps): TemplateResult => {
   const contents: TemplateResult = html`
-    <span class="c-card__icon" aria-hidden>${warningIcon}</span>
+    <span class="c-card__icon" aria-hidden="true">${warningIcon}</span>
     <div class="c-card__content">
       <h3 class="t-title c-card__title">${title}</h3>
       <div data-role="warning-message" class="t-paragraph c-card__paragraph">

diff --git a/src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts b/src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts
@@ -18,7 +18,7 @@ const pageContent = (
   tentativeRegistrationInfo: TentativeRegistrationInfo
 ) => html`
   <div class="l-container c-card c-card--highlight">
-    <hgroup>  
+    <hgroup>
       <h1 class="t-title t-title--main">Device Verification Required</h1>
       <p class="t-lead">
         This device was added tentatively to the Identity Anchor
@@ -28,18 +28,19 @@ const pageContent = (
       </p>
     </hgroup>
     <h2 class="t-title">Alias</h2>
-    <output class="c-input c-input--readonly t-vip t-vip--small">${alias}</output>
-    <h2 class="t-title">Device Verification Code</hs>
-    <output
-      id="verificationCode"
-      class="c-input c-input--readonly t-vip"
+    <output class="c-input c-input--readonly t-vip t-vip--small"
+      >${alias}</output
     >
+    <h2 class="t-title">Device Verification Code</h2>
+    <output id="verificationCode" class="c-input c-input--readonly t-vip">
       ${tentativeRegistrationInfo.verification_code}
     </output>
     <div class="l-stack">
       <p>Time remaining: <span id="timer"></span></p>
       <div class="l-stack">
-        <button id="showCodeCancel" class="c-button c-button--secondary">Cancel</button>
+        <button id="showCodeCancel" class="c-button c-button--secondary">
+          Cancel
+        </button>
       </div>
     </div>
   </div>

diff --git a/src/frontend/src/flows/authenticate/index.ts b/src/frontend/src/flows/authenticate/index.ts
@@ -89,8 +89,7 @@ const pageContent = (
         </p>
         ${derivationOrigin !== undefined
           ? html`
-        <p class="t-paragraph t-weak">
-          <span id="alternative-origin-chasm-toggle" class="t-action" @click="${chasmToggle}" >shared identity <span ${ref(
+        <p class="t-paragraph t-weak"><span id="alternative-origin-chasm-toggle" class="t-action" @click="${chasmToggle}" >shared identity <span ${ref(
               chasmToggleRef
             )} class="t-link__icon c-chasm__button">${caretDownIcon}</span></span><br/>
           <div ${ref(chasmRef)} class="c-chasm c-chasm--closed">

diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
@@ -100,7 +100,7 @@ const devicesSection = (
             Remove a device before you can add a new one.</span
           >
           <span class="t-link t-link--discreet">
-            <i class="t-link__icon" aria-hidden>+</i>
+            <i class="t-link__icon" aria-hidden=true>+</i>
             Add new device
           </span>
         </button>
@@ -125,7 +125,7 @@ const recoverySection = (
                 class="t-title__complication t-title__complication--end"
                 id="addRecovery"
               >
-                <i class="t-link__icon" aria-hidden>+</i>
+                <i class="t-link__icon" aria-hidden="true">+</i>
                 <span class="t-link t-link--discreet"
                   >Add recovery mechanism</span
                 >

diff --git a/src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts b/src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts
@@ -18,7 +18,7 @@ const pageContent = (devices: DeviceData[]) => html`
         class="c-button c-button--secondary"
         id="seedPhrase"
       >
-        <span aria-hidden>${seedPhraseIcon}</span>
+        <span aria-hidden="true">${seedPhraseIcon}</span>
         <div class="t-strong">Seed Phrase</div>
         <div class="t-weak">Use your own storage</div>
       </button>
@@ -27,7 +27,7 @@ const pageContent = (devices: DeviceData[]) => html`
         class="c-button c-button--secondary"
         id="securityKey"
       >
-        <span aria-hidden>${securityKeyIcon}</span>
+        <span aria-hidden="true">${securityKeyIcon}</span>
         <div class="t-strong">Security Key</div>
         <div class="t-weak">Use an extra security key</div>
       </button>

diff --git a/src/frontend/src/flows/recovery/pickRecoveryDevice.ts b/src/frontend/src/flows/recovery/pickRecoveryDevice.ts
@@ -5,7 +5,7 @@ const pageContent = () => html`
   <div class="l-container c-card c-card--highlight c-card--highlight">
     <h1 class="t-title t-title--main">Choose a device</h1>
     <div class="l-stack">
-      <h2 class="t-title">Recovery devices</div>
+      <h2 class="t-title">Recovery devices</h2>
       <ol class="c-list l-stack" id="deviceList"></ol>
     </div>
   </div>

diff --git a/src/frontend/src/flows/recovery/recoverWith/phrase.ts b/src/frontend/src/flows/recovery/recoverWith/phrase.ts
@@ -26,8 +26,8 @@ const pageContent = (userNumber: bigint, message?: string) => html`
         background-color: unset;
       }
       50% {
-        background-color: #ED1E79;
-        border-color: #ED1E79;
+        background-color: #ed1e79;
+        border-color: #ed1e79;
       }
       100% {
         background-color: unset;
@@ -42,19 +42,28 @@ const pageContent = (userNumber: bigint, message?: string) => html`
   <article class="l-container c-card c-card--highlight">
     <hgroup>
       <h1 class="t-title t-title--main">Your seed phrase</h1>
-      <p class="t-lead">${
-        message !== undefined ? message : "Please provide your seed phrase"
-      }</p>
+      <p class="t-lead">
+        ${message !== undefined ? message : "Please provide your seed phrase"}
+      </p>
     </hgroup>
-    <textarea id="inputSeedPhrase" class="c-input" placeholder="${
-      userNumber + " above squirrel ..."
-    }"></textarea>
-    <details data-id="phrase-warnings" class="c-card c-card--highlight is-hidden">
-        <summary><span class="warnings-box-summary">Phrase may not be valid<span></summary>
-        <div id="warnings"></div>
+    <textarea
+      id="inputSeedPhrase"
+      class="c-input"
+      placeholder="${userNumber + " above squirrel ..."}"
+    ></textarea>
+    <details
+      data-id="phrase-warnings"
+      class="c-card c-card--highlight is-hidden"
+    >
+      <summary>
+        <span class="warnings-box-summary">Phrase may not be valid</span>
+      </summary>
+      <div id="warnings"></div>
     </details>
     <div class="c-button-group">
-      <button id="inputSeedPhraseCancel" class="c-button c-button--secondary">Cancel</button>
+      <button id="inputSeedPhraseCancel" class="c-button c-button--secondary">
+        Cancel
+      </button>
       <button id="inputSeedPhraseContinue" class="c-button">Continue</button>
     </div>
   </article>

diff --git a/src/frontend/src/styleguide.ts b/src/frontend/src/styleguide.ts
@@ -152,7 +152,7 @@ export const styleguide = html`
         <section class="demo" aria-label="Paragraphs Demo">
           <hr class="l-divider" />
           <div class="l-divider l-divider--text" aria-label="Other Options">
-            <span class="l-divider__label" aria-hidden>Or</span>
+            <span class="l-divider__label" aria-hidden="true">Or</span>
           </div>
         </section>
         <p class="t-lead">
@@ -183,7 +183,7 @@ export const styleguide = html`
           </div>
 
           <div class="c-card c-card--warning">
-            <span class="c-card__icon" aria-hidden>${warningIcon}</span>
+            <span class="c-card__icon" aria-hidden="true">${warningIcon}</span>
             <div class="c-card__content">
               <h2 class="c-card__title t-title">Warning Card with Icon</h2>
               <p class="c-card__text t-paragraph">