a11y: mark decorative drag-handle glyphs aria-hidden across all file/bookmark/rect list rows

Author: Antikode

app.js

@@ -52,7 +52,7 @@ function renderList() {
     li.dataset.index = String(i);
 
     li.innerHTML = `
-      <span class="handle">⠿</span>
+      <span class="handle" aria-hidden="true">⠿</span>
       <span class="name">${i + 1}. ${escapeHtml(entry.file.name)}</span>
       <span class="size">${formatSize(entry.file.size)}</span>
       <button class="move-up" type="button" aria-label="Move ${escapeHtml(entry.file.name)} up" ${i === 0 ? "disabled" : ""}>↑</button>

bookmarks.js

@@ -60,7 +60,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;
@@ -73,7 +73,7 @@ function renderBookmarks() {
     const li = document.createElement("li");
     li.className = "file-row";
     li.innerHTML = `
-      <span class="handle">▤</span>
+      <span class="handle" aria-hidden="true">▤</span>
       <span class="name">${escapeHtml(b.title)}</span>
       <span class="size">page ${b.page}</span>
       <button class="remove" type="button" aria-label="Remove bookmark" data-index="${i}">✕</button>

border.js

@@ -57,7 +57,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

compress.js

@@ -74,7 +74,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

crop.js

@@ -58,7 +58,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

delete-pages.js

@@ -55,7 +55,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

duplicate-pages.js

@@ -55,7 +55,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

extract-images.js

@@ -113,7 +113,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

fill-form.js

@@ -69,7 +69,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;

flatten.js

@@ -54,7 +54,7 @@ function renderFile() {
   const li = document.createElement("li");
   li.className = "file-row";
   li.innerHTML = `
-    <span class="handle">◆</span>
+    <span class="handle" aria-hidden="true">◆</span>
     <span class="name">${escapeHtml(loaded.file.name)} — ${loaded.pageCount} page${loaded.pageCount === 1 ? "" : "s"}</span>
     <span class="size">${formatSize(loaded.file.size)}</span>
   `;