feat(accessibility): fix warning (#83)

teomrd · Nov 13, 2024 · df049e5 · df049e5
1 parent 9692e68
commit df049e5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 80 deletions.
diff --git a/.lighthouserc.json b/.lighthouserc.json
@@ -17,7 +17,7 @@
         "categories:accessibility": [
           "error",
           {
-            "minScore": 0.9
+            "minScore": 1
           }
         ],
         "categories.best-practices" : [

diff --git a/Makefile b/Makefile
@@ -10,6 +10,9 @@ install:
 dev: install
 	open http://localhost:8000 && sh scripts/dev.sh
 
+format: 
+	deno fmt
+
 verify-formatting: 
 	deno fmt --check
 

diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,7 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="theme-color" content="#000000" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="manifest" href="./manifest.json" crossOrigin="use-credentials" />
+    <link rel="manifest" href="./manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" href="./images/icons/icon-192x192.png" />
     <title>
       MiroPad
@@ -28,8 +28,8 @@
             xmlns="http://www.w3.org/2000/svg"
             width="30px"
             height="30px"
-            viewBox="0 0 720 720"
-            preserveAspectRatio="xMidYMid meet"
+            viewbox="0 0 720 720"
+            preserveaspectratio="xMidYMid meet"
           >
             <g id="layer101" fill="#000000" stroke="none">
               <path
@@ -54,12 +54,17 @@ <h3>✍️ MiroPad</h3>
         </div>
       </div>
       <div>
-        <button id="note-info-button" class="icon-button">
+        <button
+          id="note-info-button"
+          class="icon-button"
+          title="info"
+          aria-label="show note information"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="22"
             height="22"
-            viewBox="0 0 22 22"
+            viewbox="0 0 22 22"
           >
             <path
               d="M11 4c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-2a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 8h-2v6h2v-6zm-1-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
@@ -74,7 +79,7 @@ <h3>✍️ MiroPad</h3>
           title="Create public permalink"
         >
           <svg
-            viewBox="0 0 16 16"
+            viewbox="0 0 16 16"
             version="1.1"
             width="16"
             height="16"
@@ -94,20 +99,16 @@ <h3>✍️ MiroPad</h3>
     <main>
       <textarea
         aria-label="Keep you notes here safely"
-        autocomplete
-        autofocus
+        autocomplete="autocomplete"
+        autofocus="autofocus"
         class="terminal"
       ></textarea>
       <div id="suggestion" class="suggestion"></div>
       <div id="notification" class="notification"></div>
       <div class="preview hidden markdown-body"></div>
     </main>
     <aside class="hidden">
-      <editable-list
-        title="ToDo"
-        add-item-text="Add a ToDo: "
-      >
-      </editable-list>
+      <editable-list title="ToDo" add-item-text="Add a ToDo: "></editable-list>
     </aside>
     <div id="commander" class="commander hidden">
       <div class="palette frost">
@@ -130,7 +131,7 @@ <h3>INFO</h3>
             xmlns="http://www.w3.org/2000/svg"
             width="22"
             height="22"
-            viewBox="0 0 22 22"
+            viewbox="0 0 22 22"
           >
             <path
               d="M18.707 4.707l-1.414-1.414L11 9.586 4.707 3.293 3.293 4.707 9.586 11l-6.293 6.293 1.414 1.414L11 12.414l6.293 6.293 1.414-1.414L12.414 11z"

diff --git a/src/js/components/organisms/commander/commands.ts b/src/js/components/organisms/commander/commands.ts
@@ -130,7 +130,7 @@ export const commands = () => {
     {
       title: "Save",
       key: "s",
-      icon: icon(CheckmarkCircleSVG, "save"),
+      icon: icon(CheckmarkCircleSVG, "save note"),
       sortTitle: "Save",
       call: async () => {
         commander.hide();
@@ -156,7 +156,7 @@ export const commands = () => {
     },
     {
       title: "Full MarkDown view",
-      icon: icon(FrameExpandSVG, "full view"),
+      icon: icon(FrameExpandSVG, "full view mode"),
       sortTitle: "Full view",
       key: "shift m",
       call: () => {
@@ -167,7 +167,7 @@ export const commands = () => {
     ...(isUserLoggedIn() ? [sharePublicLinkCommand] : []),
     {
       title: "Zen mode",
-      icon: icon(LeafSVG, "zen mode"),
+      icon: icon(LeafSVG, "switch to zen mode"),
       sortTitle: "Zen mode",
       key: "shift z",
       call: () => {

diff --git a/static/index.html b/static/index.html
@@ -8,7 +8,7 @@
     <link rel="icon" href="./favicon.ico">
     <meta name="theme-color" content="#000000"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="manifest" href="./manifest.json" crossOrigin="use-credentials" />
+    <link rel="manifest" href="./manifest.json" crossorigin="use-credentials"/>
     <link rel="apple-touch-icon" href="./images/icons/icon-192x192.png">
     <link rel="stylesheet" href="index.css">
     <title>
@@ -21,19 +21,15 @@
       <div class="brand">
         <div id="logo" class="logo">
           <div id="circle-loader"></div>
-          <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 720 720"
-            preserveAspectRatio="xMidYMid meet">
+          <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewbox="0 0 720 720" preserveaspectratio="xMidYMid meet">
             <g id="layer101" fill="#000000" stroke="none">
-              <path
-                d="M17 702 c-15 -17 -17 -55 -17 -344 0 -302 1 -326 18 -341 17 -15 55 -17 344 -17 302 0 326 1 341 18 15 17 17 55 17 344 0 302 -1 326 -18 341 -17 15 -55 17 -344 17 -302 0 -326 -1 -341 -18z" />
+              <path d="M17 702 c-15 -17 -17 -55 -17 -344 0 -302 1 -326 18 -341 17 -15 55 -17 344 -17 302 0 326 1 341 18 15 17 17 55 17 344 0 302 -1 326 -18 341 -17 15 -55 17 -344 17 -302 0 -326 -1 -341 -18z"/>
             </g>
             <g id="layer102" fill="#00d100" stroke="none">
-              <path
-                d="M124 527 c-2 -7 9 -60 26 -117 42 -141 49 -199 25 -216 -17 -13 -16 -14 17 -14 49 0 62 19 56 83 -5 51 -5 51 11 27 31 -49 79 -90 104 -90 57 0 71 60 42 170 -8 30 -13 55 -11 57 2 2 35 -30 73 -70 105 -110 145 -113 113 -8 -25 79 -27 161 -4 161 9 0 14 6 12 13 -3 6 -15 12 -29 12 -38 0 -51 -37 -45 -127 3 -43 4 -78 1 -78 -2 0 -36 45 -76 100 -58 80 -77 100 -97 100 -20 0 -23 -4 -20 -22 3 -13 16 -71 28 -129 22 -102 22 -139 1 -139 -25 0 -88 85 -138 188 -52 104 -76 132 -89 99z" />
+              <path d="M124 527 c-2 -7 9 -60 26 -117 42 -141 49 -199 25 -216 -17 -13 -16 -14 17 -14 49 0 62 19 56 83 -5 51 -5 51 11 27 31 -49 79 -90 104 -90 57 0 71 60 42 170 -8 30 -13 55 -11 57 2 2 35 -30 73 -70 105 -110 145 -113 113 -8 -25 79 -27 161 -4 161 9 0 14 6 12 13 -3 6 -15 12 -29 12 -38 0 -51 -37 -45 -127 3 -43 4 -78 1 -78 -2 0 -36 45 -76 100 -58 80 -77 100 -97 100 -20 0 -23 -4 -20 -22 3 -13 16 -71 28 -129 22 -102 22 -139 1 -139 -25 0 -88 85 -138 188 -52 104 -76 132 -89 99z"/>
             </g>
             <g id="layer103" fill="#00fd00" stroke="none">
-              <path
-                d="M134 534 c-12 -5 -4 -43 32 -164 33 -113 35 -157 8 -177 -17 -12 -17 -13 3 -13 12 0 34 5 49 10 25 10 26 13 21 58 -4 26 -10 58 -13 71 -10 34 7 20 30 -26 34 -66 55 -83 103 -83 36 0 43 3 48 23 8 30 0 89 -19 152 -8 27 -14 50 -12 52 5 5 70 -58 111 -107 37 -45 73 -64 94 -50 9 5 6 22 -9 62 -33 88 -34 194 -1 174 6 -4 11 -2 11 4 0 20 -32 23 -50 4 -15 -15 -19 -35 -20 -89 0 -38 1 -77 2 -85 5 -23 -14 -27 -26 -6 -6 11 -19 29 -29 40 -10 11 -36 49 -59 83 -43 64 -46 67 -71 57 -11 -4 -12 -14 -7 -43 4 -21 10 -42 13 -48 7 -11 16 -61 24 -136 11 -110 -70 -48 -149 114 -25 52 -48 102 -51 112 -6 17 -13 19 -33 11z" />
+              <path d="M134 534 c-12 -5 -4 -43 32 -164 33 -113 35 -157 8 -177 -17 -12 -17 -13 3 -13 12 0 34 5 49 10 25 10 26 13 21 58 -4 26 -10 58 -13 71 -10 34 7 20 30 -26 34 -66 55 -83 103 -83 36 0 43 3 48 23 8 30 0 89 -19 152 -8 27 -14 50 -12 52 5 5 70 -58 111 -107 37 -45 73 -64 94 -50 9 5 6 22 -9 62 -33 88 -34 194 -1 174 6 -4 11 -2 11 4 0 20 -32 23 -50 4 -15 -15 -19 -35 -20 -89 0 -38 1 -77 2 -85 5 -23 -14 -27 -26 -6 -6 11 -19 29 -29 40 -10 11 -36 49 -59 83 -43 64 -46 67 -71 57 -11 -4 -12 -14 -7 -43 4 -21 10 -42 13 -48 7 -11 16 -61 24 -136 11 -110 -70 -48 -149 114 -25 52 -48 102 -51 112 -6 17 -13 19 -33 11z"/>
             </g>
           </svg>
         </div>
@@ -43,62 +39,55 @@ <h3>✍️ MiroPad</h3>
         </div>
       </div>
       <div>
-        <button id="note-info-button" class="icon-button">
-          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
-            <path d="M11 4c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-2a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 8h-2v6h2v-6zm-1-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z">
-            </path>
-          </svg>    
+        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewbox="0 0 22 22">
+          <path d="M11 4c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-2a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 8h-2v6h2v-6zm-1-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+        </svg>
+      </button>
+      <a id="permalink" class="anchor hidden" aria-hidden="true" title="Create public permalink">
+        <svg viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+          <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+        </svg>
+      </a>
+      <div class="divider"></div>
+      <div class="menu"></div>
+    </div>
+  </header>
+  <main>
+    <textarea aria-label="Keep you notes here safely" autocomplete="autocomplete" autofocus="autofocus" class="terminal"></textarea>
+    <div id='suggestion' class="suggestion"></div>
+    <div id='notification' class="notification"></div>
+    <div class="preview hidden markdown-body"></div>
+  </main>
+  <aside class="hidden">
+    <editable-list title="ToDo" add-item-text="Add a ToDo: "></editable-list>
+  </aside>
+  <div id="commander" class="commander hidden">
+    <div class="palette frost">
+      <div>
+        <input/>
+        <button class="btn" type="button">
+          Cancel
         </button>
-        <a id="permalink" class="anchor hidden" aria-hidden="true" title="Create public permalink">
-          <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
-            <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
-          </svg>
-        </a>
-        <div class="divider"></div>
-        <div class="menu"></div>
-      </div>
-    </header>
-    <main>
-      <textarea aria-label="Keep you notes here safely" autocomplete autofocus class="terminal"></textarea>
-      <div id='suggestion' class="suggestion"></div>
-      <div id='notification' class="notification"></div>
-      <div class="preview hidden markdown-body"></div>
-    </main>
-    <aside class="hidden">
-      <editable-list
-        title="ToDo"
-        add-item-text="Add a ToDo: "
-      >
-      </editable-list>
-    </aside>
-    <div id="commander" class="commander hidden">
-      <div class="palette frost">
-          <div>
-            <input />
-            <button class="btn"
-              type="button">
-              Cancel
-            </button>
-          </div> 
-          <ul id="commands"></ul>
       </div>
+      <ul id="commands"></ul>
     </div>
-    <div class="mobile-dock frost">
+  </div>
+  <div class="mobile-dock frost"></div>
+  <aside class="note-info hidden frost">
+    <div class="note-info-header">
+      <h3>INFO</h3>
+      <button id="note-info-close" class="icon-button">
+        <svg class="icon-cross" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewbox="0 0 22 22">
+          <path d="M18.707 4.707l-1.414-1.414L11 9.586 4.707 3.293 3.293 4.707 9.586 11l-6.293 6.293 1.414 1.414L11 12.414l6.293 6.293 1.414-1.414L12.414 11z"></path>
+        </svg>
+      </button>
     </div>
-    <aside class="note-info hidden frost">
-      <div class="note-info-header">
-        <h3>INFO</h3>
-        <button id="note-info-close" class="icon-button">
-          <svg class="icon-cross" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M18.707 4.707l-1.414-1.414L11 9.586 4.707 3.293 3.293 4.707 9.586 11l-6.293 6.293 1.414 1.414L11 12.414l6.293 6.293 1.414-1.414L12.414 11z"></path>
-          </svg>
-        </button>
-      </div>
-      <div class="details"></div>
-    </aside>
-    <footer>
-      <div class="console hidden"></div>
-    </footer>
-    <script type="module" src="./index.js"></script>
-  </body>
+    <div class="details"></div>
+  </aside>
+  <footer>
+    <div class="console hidden"></div>
+  </footer>
+  <script type="module" src="./index.js"></script>
+</body>
 
 </html>