Update combobox css for improved a11y

Author: rossta

app/javascript/controllers/searches/combobox.js

@@ -9,6 +9,7 @@ const cancel = (event) => {
   event.preventDefault();
 };
 
+/* When the index is out of bounds, return the first or last item */
 function cyclingValueAt(array, index) {
   const first = 0;
   const last = array.length - 1;
@@ -20,7 +21,7 @@ function cyclingValueAt(array, index) {
 
 export default class extends Controller {
   connect() {
-    console.log('Connected', this.element, this.listbox, this.combobox);
+    console.log('Connected');
   }
 
   selectIndex(index) {
@@ -60,7 +61,6 @@ export default class extends Controller {
   }
 
   navigate(event) {
-    console.log('Navigating', event); // event.key, e.g. "ArrowDown"
     this.navigationKeyHandlers[event.key]?.call(this, event);
   }
 
@@ -69,7 +69,7 @@ export default class extends Controller {
   }
 
   get selectedItem() {
-    return this.element.querySelector('.selected');
+    return this.element.querySelector('[role="option"].selected');
   }
 
   get selectedItemIndex() {

app/javascript/css/components/combobox.css

@@ -1,17 +1,28 @@
 .combobox {
+  cursor: pointer;
+
   & ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
   }
 
+  /*
+   * Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels. When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
+   * Courtesy https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
+   */
   & [role='option'] {
+    padding: 2px;
+
     &:hover {
       background-color: var(--joy-block-hover);
     }
 
     &.selected {
+      padding: 0;
+
       background-color: var(--joy-block-selected);
+      border: 2px solid var(--joy-border-bold);
     }
   }
 }

app/javascript/css/config/theme.css

@@ -61,7 +61,9 @@
 
   --joy-border-quiet: var(--joy-color-100);
   --joy-border-subtle: var(--joy-color-300);
+  --joy-border-bold: var(--joy-color-700);
   --joy-border: var(--joy-color-600);
+
   --joy-color-quote: var(--joy-color-600);
 
   --joy-text: var(--color-dark);
@@ -117,6 +119,7 @@
 
   --joy-border-quiet: var(--joy-color-900);
   --joy-border-subtle: var(--joy-color-800);
+  --joy-border-bold: var(--joy-color-400);
   --joy-border: var(--joy-color-600);
 
   --joy-text: var(--joy-color-50);

app/views/searches/listbox.rb

@@ -20,7 +20,7 @@ def view_template
       )) do
         if pages.any?
           pages.each.with_index do |page, i|
-            li(role: "option", id: dom_id(page, "search-option")) do
+            li(role: "option", id: dom_id(page, "search-option"), class: "rounded") do
               a(
                 href: page.request_path,
                 data: {