Close unclosed tags and more

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 · 4c51d69 · 4c51d69
1 parent 830cc2e
commit 4c51d69
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 76 deletions.
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";
 
@@ -100,7 +101,7 @@ export const mkAnchorInput = (props: {
         id="${props.inputId}"
         class="c-input c-input--vip"
         placeholder="Enter anchor"
-        value="${props.userNumber}"
+        value="${ifDefined(props.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/login/knownAnchor.ts b/src/frontend/src/flows/login/knownAnchor.ts
@@ -9,31 +9,40 @@ import { loginUnknownAnchor } from "./unknownAnchor";
 import { apiResultToLoginFlowResult, LoginFlowResult } from "./flowResult";
 import { useRecovery } from "../recovery/useRecovery";
 
-const pageContent = (userNumber: bigint) => html`
-  <div class="l-container c-card c-card--highlight">
+const pageContent = (userNumber: bigint) => html` <div
+    class="l-container c-card c-card--highlight"
+  >
     <div class="c-logo">${icLogo}</div>
     <hgroup class="l-stack">
       <h1 class="t-title t-title--main">Welcome back!</h1>
       <!--  paragraph is hidden but included for accessibility -->
       <p class="t-lead is-hidden">Authenticate using Internet Identity.</p>
-    <hgroup>
+    </hgroup>
     <div class="l-stack">
-      <output class="c-input c-input--vip c-input--readonly t-vip" aria-label="User Number" data-usernumber>${userNumber}</output>
+      <output
+        class="c-input c-input--vip c-input--readonly t-vip"
+        aria-label="User Number"
+        data-usernumber
+        >${userNumber}</output
+      >
       <button type="button" id="login" class="c-button">Authenticate</button>
       <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>
     </div>
-    <button type="button" id="loginDifferent" class="c-button c-button--secondary">
+    <button
+      type="button"
+      id="loginDifferent"
+      class="c-button c-button--secondary"
+    >
       Use a different Identity Anchor
     </button>
     <div class="l-stack">
       <p>
         <a id="recoverButton" class="t-link">Lost Access?</a>
       </p>
     </div>
-    ${logoutSection("Clear Identity Anchor from browser")}
-    ${navbar}
+    ${logoutSection("Clear Identity Anchor from browser")} ${navbar}
   </div>
   ${footer}`;
 

diff --git a/src/frontend/src/flows/login/unknownAnchor.ts b/src/frontend/src/flows/login/unknownAnchor.ts
@@ -22,45 +22,54 @@ const pageContent = (props: {
     inputId: "registerUserNumber",
     onSubmit: props.onContinue,
   });
-  const template = html`
-  <section class="l-container c-card c-card--highlight" aria-label="Authentication">
-    <div class="c-logo">${icLogo}</div>
-    <article class="l-stack">
-      <hgroup>
-        <h1 id="loginWelcome" class="t-title t-title--main">Welcome to<br />Internet Identity</h1>
-        <p class="t-lead">Provide an Identity Anchor to authenticate.</p>
-      <hgroup>
-      <div class="l-stack">
-        ${anchorInput.template}
-        <button @click="${anchorInput.submit}" type="button" id="loginButton" class="c-button">
-          Authenticate
-        </button>
-      </div>
-    </article>
+  const template = html` <section
+      class="l-container c-card c-card--highlight"
+      aria-label="Authentication"
+    >
+      <div class="c-logo">${icLogo}</div>
+      <article class="l-stack">
+        <hgroup>
+          <h1 id="loginWelcome" class="t-title t-title--main">
+            Welcome to<br />Internet Identity
+          </h1>
+          <p class="t-lead">Provide an Identity Anchor to authenticate.</p>
+        </hgroup>
+        <div class="l-stack">
+          ${anchorInput.template}
+          <button
+            @click="${anchorInput.submit}"
+            type="button"
+            id="loginButton"
+            class="c-button"
+          >
+            Authenticate
+          </button>
+        </div>
+      </article>
 
-    <aside class="l-stack l-stack--spacious" aria-label="Other actions">
-      <ul class="t-discreet c-list">
-        <li class="textLink" id="registerSection">
-          New?
-          <a id="registerButton" class="t-link">Create an Internet Identity Anchor.</a>
-        </li>
-        <li class="textLink">
-          Already have an anchor
-          <a id="addNewDeviceButton" class="t-link">
-            but using a new device?
-          </a>
-        </li>
-        <li class="textLink">
-          Lost access
-          <a id="recoverButton" class="t-link">
-            and want to recover?
-          </a>
-        </li>
-      </ul>
-    </aside>
-    ${navbar}
-  </section>
-  ${footer}`;
+      <aside class="l-stack l-stack--spacious" aria-label="Other actions">
+        <ul class="t-discreet c-list">
+          <li class="textLink" id="registerSection">
+            New?
+            <a id="registerButton" class="t-link"
+              >Create an Internet Identity Anchor.</a
+            >
+          </li>
+          <li class="textLink">
+            Already have an anchor
+            <a id="addNewDeviceButton" class="t-link">
+              but using a new device?
+            </a>
+          </li>
+          <li class="textLink">
+            Lost access
+            <a id="recoverButton" class="t-link"> and want to recover? </a>
+          </li>
+        </ul>
+      </aside>
+      ${navbar}
+    </section>
+    ${footer}`;
 
   return { ...anchorInput, template };
 };

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">