fix(a11y): Use descriptive labels for bookmark colour buttons

src/plugins/bookmarks/bookmark-edit.js

@@ -2,6 +2,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { css, html, LitElement, nothing } from 'lit';
 import bookmarkColorsCSS from './bookmark-colors.js';
 import buttonCSS from '../../css/button-base.js';
+import { sharedStyles } from '../../css/sharedStyles.js';
 
 export class IABookmarkEdit extends LitElement {
   static get properties() {
@@ -66,7 +67,8 @@ export class IABookmarkEdit extends LitElement {
     return html`
       <div class="color-option">
         <input type="radio" name="color" id="color_${color.id}" .value=${color.id} @change=${() => this.changeColorTo(color.id)} ?checked=${this.bookmark.color === color.id}>
-        <label for="color_${color.id}" title=${color.className}>
+        <label for="color_${color.id}" title=${color.label}>
+          <span class="sr-only">${color.label}</span>
           <icon-bookmark class=${color.className} aria-hidden="true"></icon-bookmark>
         </label>
       </div>
@@ -221,7 +223,7 @@ export class IABookmarkEdit extends LitElement {
       justify-items: stretch;
     }
     `;
-    return [buttonCSS, bookmarkColorsCSS, bookmarkEditCSS];
+    return [sharedStyles, buttonCSS, bookmarkColorsCSS, bookmarkEditCSS];
   }
 }
 customElements.define('ia-bookmark-edit', IABookmarkEdit);

src/plugins/bookmarks/bookmarks-list.js

@@ -96,15 +96,15 @@ export class IABookmarksList extends LitElement {
 
   bookmarkItem(bookmark) {
     const editMode = this.editedBookmark.id === bookmark.id;
-    const { className } = this.bookmarkColorInfo(bookmark.color);
+    const { className, label } = this.bookmarkColorInfo(bookmark.color);
     const activeClass = bookmark.id === this.activeBookmarkID ? 'active' : '';
     return html`
       <li data-pageIndex=${bookmark.id}>
         <div class="separator"></div>
         <div class="bookmark-card ${activeClass}">
           <div class="bookmark-header" @click=${() => this.emitSelectedEvent(bookmark)}>
             <button>
-              <icon-bookmark class=${className} aria-label="${className} bookmark"></icon-bookmark>
+              <icon-bookmark class=${className} aria-label="${label} bookmark"></icon-bookmark>
               <span> Page ${bookmark.page}</span>
             </button>
             <button

src/plugins/bookmarks/ia-bookmarks.js

@@ -109,13 +109,15 @@ class IABookmarks extends LitElement {
 
     this.bookmarkColors = [{
       id: 0,
-      // FIXME: This is also used as the aria-label
+      label: 'Red',
       className: 'red',
     }, {
       id: 1,
+      label: 'Blue',
       className: 'blue',
     }, {
       id: 2,
+      label: 'Green',
       className: 'green',
     }];
 

tests/jest/plugins/bookmarks/bookmark-edit.test.js

@@ -7,18 +7,23 @@ import '@/src/plugins/bookmarks/bookmark-edit.js';
 
 const bookmarkColors = [{
   id: 0,
+  label: '',
   className: '',
 }, {
   id: 1,
+  label: 'Blue',
   className: 'blue',
 }, {
   id: 2,
+  label: 'Red',
   className: 'red',
 }, {
   id: 3,
+  label: 'Green',
   className: 'green',
 }, {
   id: 4,
+  label: 'Yellow',
   className: 'yellow',
 }];