Merge pull request #269 from joyofrails/feat/combobox-a11y

Improve combobox a11y

Author: rossta

app/assets/images/app-icons/apple-touch-icon-local.png

@@ -0,0 +1,16 @@
+---
+title: Joy of Rails 💜 Hatchbox
+author: Ross Kaffenberger
+layout: article
+summary: Joy of Rails deployments and server processes are managed by Hatchbox. Hatchbox is a Rails deployment tool that makes it easy to deploy Rails apps to your own servers on DigitalOcean, Linode, or similar.
+published: '2024-11-11'
+uuid: 0192f76f-2f11-7db3-9d72-0fa782be2543
+image: content/hatchbox/placeholder.jpg
+meta_image: content/hatchbox/placeholder.jpg
+tags:
+  - Rails
+---
+
+### Enabling jemalloc
+
+https://hatchbox.relationkit.io/articles/122-how-can-i-use-jemalloc-with-my-application

app/assets/images/app-icons/icon-local.svg

@@ -1,20 +1,35 @@
+require "debug"
+
 class SearchesController < ApplicationController
   rescue_from Searches::ParseFailed do |error|
     respond_to do |format|
-      format.html { render Searches::ShowView.new(pages: [], query: @raw_query) }
-      format.turbo_stream { render turbo_stream: turbo_stream.replace("search-results", plain: "No results") }
+      format.html { render Searches::ShowView.new(pages: [], query: params[:query]) }
+      format.turbo_stream {
+        render turbo_stream: [
+          turbo_stream.replace("search-listbox", Searches::Listbox.new(pages: [], query: params[:query]))
+        ]
+      }
     end
   end
 
   def show
-    @raw_query = params[:query] || ""
-    pages = if @raw_query.present?
-      query = Searches::Query.parse!(@raw_query)
+    raw_query = params[:query] || ""
+    pages = if raw_query.present?
+      query = Searches::Query.parse!(raw_query)
       Page.search("#{query}*").with_snippets.ranked.limit(3)
     else
       []
     end
 
-    render Searches::ShowView.new(pages:, query: @raw_query)
+    respond_to do |format|
+      format.html {
+        render Searches::ShowView.new(pages:, query: raw_query)
+      }
+      format.turbo_stream {
+        render turbo_stream: [
+          turbo_stream.replace("search-listbox", Searches::Listbox.new(pages: pages, query: raw_query))
+        ]
+      }
+    end
   end
 end

app/assets/images/app-icons/icon.svg

@@ -1,10 +1,12 @@
 module ApplicationHelper
   def seo_meta_tags
     favicon_path = Rails.env.local? ? asset_path("app-icons/favicon-local.ico") : asset_path("app-icons/favicon.ico")
+    favicon_svg_path = Rails.env.local? ? asset_path("app-icons/icon-local.svg") : asset_path("app-icons/icon.svg")
+    apple_touch_icon_path = Rails.env.local? ? asset_path("app-icons/apple-touch-icon-local.png") : asset_path("app-icons/apple-touch-icon.png")
     set_meta_tags icon: [
       {rel: "icon", href: favicon_path, sizes: "32x32"},
-      {rel: "icon", href: asset_path("app-icons/icon.svg"), type: "image/svg+xml"},
-      {rel: "apple-touch-icon", href: asset_path("app-icons/apple-touch-icon.png")}
+      {rel: "icon", href: favicon_svg_path, type: "image/svg+xml"},
+      {rel: "apple-touch-icon", href: apple_touch_icon_path}
     ]
     set_meta_tags index: true
     set_meta_tags og: {

app/assets/images/content/hatchbox/placeholder.jpg

@@ -28,6 +28,7 @@ import SnippetScreenshot from './snippets/screenshot';
 import SnippetTweet from './snippets/tweet';
 
 import SearchCombobox from './searches/combobox';
+import SearchListbox from './searches/listbox';
 
 application.register('modal-opener', ModalOpener);
 application.register('analytics', AnalyticsCustomEvent);
@@ -51,3 +52,4 @@ application.register('snippet-screenshot', SnippetScreenshot);
 application.register('snippet-tweet', SnippetTweet);
 
 application.register('search-combobox', SearchCombobox);
+application.register('search-listbox', SearchListbox);

app/content/pages/deploy/hatchbox.html.mdrb

@@ -9,24 +9,81 @@ 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;
+
+  if (index < first) return array[last];
+  if (index > last) return array[first];
+  return array[index];
+}
+
 export default class extends Controller {
   connect() {
     console.log('Connected');
-
-    this.selectIndex(0);
   }
 
   selectIndex(index) {
-    return this.items.forEach((item, i) => {
-      item.classList.toggle('selected', i === index);
-    });
+    if (this.options.length === 0) return;
+
+    console.log('Selecting index', index);
+
+    const option = cyclingValueAt(this.options, index);
+
+    this.select(option);
+  }
+
+  select(option) {
+    console.log('Selecting', option.id);
+
+    this.options.forEach(this.deselect.bind(this));
+
+    option.classList.add('selected');
+    option.setAttribute('aria-selected', 'true');
+    this.setActiveDescendant(option.id);
+  }
+
+  deselect(option) {
+    option.classList.remove('selected');
+    option.removeAttribute('aria-selected');
+    this.setActiveDescendant('');
+  }
+
+  setActiveDescendant(id) {
+    console.log('Setting active descendant', id);
+    this.combobox.setAttribute('aria-activedescendant', id);
+  }
+
+  listboxOpen({ detail }) {
+    console.log('Listbox open', this.options.length > 0);
+    this.combobox.setAttribute('aria-expanded', this.options.length > 0);
   }
 
   navigate(event) {
-    console.log('Navigating', event); // event.key, e.g. "ArrowDown"
     this.navigationKeyHandlers[event.key]?.call(this, event);
   }
 
+  get options() {
+    return [...this.element.querySelectorAll('[role="option"]')];
+  }
+
+  get selectedItem() {
+    return this.element.querySelector('[role="option"].selected');
+  }
+
+  get selectedItemIndex() {
+    return this.options.indexOf(this.selectedItem);
+  }
+
+  get combobox() {
+    return this.element.querySelector('[role="combobox"]');
+  }
+
+  get listbox() {
+    return this.element.querySelector('[role="listbox"]');
+  }
+
   get navigationKeyHandlers() {
     return {
       ArrowDown: (event) => {
@@ -42,25 +99,13 @@ export default class extends Controller {
         cancel(event);
       },
       End: (event) => {
-        this.selectIndex(this.items.length - 1);
+        this.selectIndex(this.options.length - 1);
         cancel(event);
       },
       Enter: (event) => {
-        this.selectedItem.click();
+        this.selectedItem?.querySelector('a')?.click();
         cancel(event);
       },
     };
   }
-
-  get items() {
-    return [...this.element.querySelectorAll('a')];
-  }
-
-  get selectedItem() {
-    return this.element.querySelector('.selected');
-  }
-
-  get selectedItemIndex() {
-    return this.items.indexOf(this.selectedItem);
-  }
 }

app/controllers/searches_controller.rb

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus';
+
+import { debug } from '../../utils';
+
+const console = debug('app:javascript:controllers:searches:listbox');
+
+export default class extends Controller {
+  connect() {
+    console.log('Connected');
+
+    this.dispatch('connected', { detail: { controller: this } });
+  }
+}