feat(pos-make-findable): Switch from button to checkbox, to be able to indicate, whether a resource is present in the given index

Author: angelo-v

elements/src/components/pos-make-findable/pos-make-findable.css

@@ -55,15 +55,19 @@ button.main {
     padding: 0;
     margin: 0;
     list-style: none;
-    button {
+    label {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
       transition: all 300ms var(--ease-in-out-sine);
       margin: 0;
       border: none;
       outline: none;
       padding: var(--size-2);
       width: var(--size-full);
 
-      &:hover {
+      &:hover,
+      &:focus {
         filter: brightness(80%);
       }
 
@@ -72,6 +76,9 @@ button.main {
       }
     }
   }
+  label:has(input:checked) {
+    background-color: var(--color-green-100);
+  }
 }
 
 svg {

elements/src/components/pos-make-findable/pos-make-findable.spec.tsx

@@ -340,18 +340,20 @@ describe('pos-make-findable', () => {
       expect(list).toEqualHtml(`
         <ol role="listbox">
           <li role="option">
-            <button>
+            <label>
+              <input type="checkbox">
               <pos-resource uri="https://pod.example/first-index" lazy>
                 <pos-label></pos-label>
               </pos-resource>
-            </button>
+            </label>
           </li>
           <li role="option">
-            <button>
+            <label>
+              <input type="checkbox">
               <pos-resource uri="https://pod.example/second-index" lazy>
                 <pos-label></pos-label>
               </pos-resource>
-            </button>
+            </label>
           </li>
         </ol>`);
     });
@@ -365,8 +367,8 @@ describe('pos-make-findable', () => {
       // and an option is chosen
       const options = screen.getAllByRole('option');
       expect(options.length).toEqual(2);
-      const indexButton = within(options[0]).getByRole('button');
-      fireEvent.click(indexButton);
+      const indexCheckbox = within(options[0]).getByRole('checkbox');
+      fireEvent.change(indexCheckbox);
       await page.waitForChanges();
 
       // then the thing is added to the index

elements/src/components/pos-make-findable/pos-make-findable.tsx

@@ -127,11 +127,12 @@ export class PosMakeFindable implements PodOsAware {
             <ol role="listbox">
               {this.indexes.map((index: LabelIndex) => (
                 <li role="option">
-                  <button onClick={e => this.chooseOption(e, index)}>
+                  <label>
+                    <input type="checkbox" checked={false} onChange={e => this.chooseOption(e, index)} />
                     <pos-resource uri={index.uri} lazy={true}>
                       <pos-label></pos-label>
                     </pos-resource>
-                  </button>
+                  </label>
                 </li>
               ))}
             </ol>
@@ -141,7 +142,7 @@ export class PosMakeFindable implements PodOsAware {
     );
   }
 
-  private async chooseOption(e: MouseEvent, index: LabelIndex) {
+  private async chooseOption(e: Event, index: LabelIndex) {
     e.preventDefault();
     await this.addToLabelIndex(index);
   }