semantic little spans, no-break dates, aria-label tweaks

SUNET · Nov 28, 2024 · 983bda8 · 983bda8
1 parent 0b46576
commit 983bda8
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx
@@ -384,38 +384,42 @@ function SecurityKeyTable() {
     // verify button/ verified badge
     if (cred.verified) {
       btnVerify = (
-        <p aria-label="verification status" className="verified">
-          <FormattedMessage description="security key status" defaultMessage="Verification status:" />
-          &nbsp;
-          <strong>
-            <FormattedMessage description="security verified" defaultMessage="verified" />
-          </strong>
-        </p>
+        <div aria-label="verification status" className="verified">
+          <span>
+            <FormattedMessage description="security key status" defaultMessage="Verification status:" />
+            &nbsp;
+            <strong>
+              <FormattedMessage description="security verified" defaultMessage="verified" />
+            </strong>
+          </span>
+        </div>
       );
     } else {
       btnVerify = (
-        <p aria-label="verify with freja or bankID">
-          <FormattedMessage description="security key status" defaultMessage="Verify with: " />
-          &nbsp;
-          <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenFreja(cred.key)}>
-            <FormattedMessage description="security verify" defaultMessage="Freja+" />
-          </EduIDButton>
-          <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenBankID(cred.key)}>
-            <FormattedMessage description="security verify" defaultMessage="BankID" />
-          </EduIDButton>
-        </p>
+        <div aria-label="verify with freja or bankID">
+          <span>
+            <FormattedMessage description="security key status" defaultMessage="Verify with: " />
+            &nbsp;
+            <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenFreja(cred.key)}>
+              <FormattedMessage description="security verify" defaultMessage="Freja+" />
+            </EduIDButton>
+            <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenBankID(cred.key)}>
+              <FormattedMessage description="security verify" defaultMessage="BankID" />
+            </EduIDButton>
+          </span>
+        </div>
       );
     }
 
     return (
       <React.Fragment key={cred.key}>
         <figure className={`webauthn-token-holder ${cred.verified ? "verified" : ""}`} data-token={cred.key}>
           <div>
-            <p aria-label="name">
+            <span aria-label="key name">
               <FormattedMessage description="security description name" defaultMessage="Name:" />
               &nbsp;
               <strong>{cred.description}</strong>
-            </p>
+            </span>
             <EduIDButton
               id="remove-webauthn"
               buttonstyle="close"
@@ -424,16 +428,19 @@ function SecurityKeyTable() {
             ></EduIDButton>
           </div>
           <div>
-            <p aria-label="created on">
+            <span aria-label="date created">
               <FormattedMessage description="security creation date" defaultMessage="Created:" />
               &nbsp;
+              <wbr />
               {date_created}
-            </p>
-            <p aria-label="used on">
+            </span>
+
+            <span aria-label="date used">
               <FormattedMessage description="security last used" defaultMessage="Used:" />
               &nbsp;
+              <wbr />
               {date_success}
-            </p>
+            </span>
           </div>
 
           {btnVerify}

diff --git a/src/styles/_figure.scss b/src/styles/_figure.scss
@@ -100,17 +100,20 @@ figure.webauthn-token-holder {
   & div:nth-child(2) {
     display: flex;
     align-items: end;
+    column-gap: 1em;
 
     & p:last-child {
       margin-left: 1rem;
     }
   }
 
-  p {
+  span {
     font-size: 0.9rem;
     margin-bottom: 0.2rem;
-
-    &.verified strong {
+    white-space: nowrap;
+  }
+  .verified {
+    strong {
       font-family: $akkurat;
       letter-spacing: 1px;
       font-weight: 700;