TCR-50: resolve a11y issues (#79)

folio-org · Jan 21, 2025 · ebafe7b · ebafe7b
1 parent 1d4a9ac
commit ebafe7b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/App.scss b/src/App.scss
@@ -191,4 +191,13 @@ h6 {
     gap: 8px;
     align-items: center;
   }
+
+  .invisible-text {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
 }
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -49,7 +49,7 @@
     &-group {
       &-label {
         margin-bottom: 0.5rem;
-        font-size: 0.75rem;
+        font-size: 0.855rem;
         font-weight: 700;
         color: rgba(0, 0, 0, 0.62);
       }

diff --git a/src/components/SearchResultEntry/SearchResultEntry.tsx b/src/components/SearchResultEntry/SearchResultEntry.tsx
@@ -28,6 +28,11 @@ type SearchResultEntry = {
 
 const instancesListHeader: Row = {
   selectCtl: {
+    label: (
+      <div className="invisible-text">
+        <FormattedMessage id="ld.aria.table.selectRow" />
+      </div>
+    ),
     position: 0,
   },
   title: {
@@ -51,6 +56,11 @@ const instancesListHeader: Row = {
     position: 5,
   },
   editCtl: {
+    label: (
+      <div className="invisible-text">
+        <FormattedMessage id="ld.editInstance" />
+      </div>
+    ),
     position: 6,
   },
 };