From 7a19dcaab19c10d04ace04fbdfc3ac5291e2c2d6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Jul 2026 04:43:05 +0000
Subject: [PATCH] a11y: search landmark, article aria-label, touch targets (#5)

Three focused WCAG improvements to the reader:

- reader.html: add role="search" to the search section, making it a
  proper ARIA landmark (screen reader users can jump to it with their
  landmark shortcut rather than finding a generic region).

- reader.js: set aria-label on the <article> landmark to the article
  title when opened, so the landmark menu names the open piece ("The
  Mother on Equanimity" instead of just "Article"). Reset to "Article"
  on close.

- reader.css: add padding-block: 0.55rem to .link buttons. With 1rem
  text and 1.65 line-height the tap height was ~26 px; the padding
  brings it to ~44 px, meeting WCAG 2.5.5 Touch Target (Level AA).
---
 src/reader/reader.css  | 2 +-
 src/reader/reader.html | 2 +-
 src/reader/reader.js   | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/reader/reader.css b/src/reader/reader.css
index b889d43..144c2a8 100644
--- a/src/reader/reader.css
+++ b/src/reader/reader.css
@@ -366,7 +366,7 @@ button {
 .link {
   border: 0;
   background: none;
-  padding: 0;
+  padding: 0.55rem 0; /* vertical padding brings tap target to ~44px (WCAG 2.5.5) */
   color: var(--accent);
   font: inherit;
   font-weight: 600;
diff --git a/src/reader/reader.html b/src/reader/reader.html
index a3bdcee..8053934 100644
--- a/src/reader/reader.html
+++ b/src/reader/reader.html
@@ -49,7 +49,7 @@ <h2 id="interests-heading">Your interests</h2>
         <button id="reset-profile" type="button" class="secondary">Clear my profile</button>
       </section>
 
-      <section aria-labelledby="search-heading" class="panel">
+      <section role="search" aria-labelledby="search-heading" class="panel">
         <h2 id="search-heading">Search this edition</h2>
         <label class="visually-hidden" for="search">Search articles</label>
         <input
diff --git a/src/reader/reader.js b/src/reader/reader.js
index c3ee722..77933b9 100644
--- a/src/reader/reader.js
+++ b/src/reader/reader.js
@@ -285,6 +285,7 @@ function renderSearchResults(hits) {
 function openArticle(article) {
   personalizer.recordRead(article);
   els.article.hidden = false;
+  els.article.setAttribute('aria-label', article.title);
   els.article.replaceChildren();
 
   const close = document.createElement('button');
@@ -315,6 +316,7 @@ function openArticle(article) {
 function closeArticle() {
   if (els.article.hidden) return;
   els.article.hidden = true;
+  els.article.setAttribute('aria-label', 'Article');
   els.article.replaceChildren();
   els.resultsHeading.tabIndex = -1;
   els.resultsHeading.focus();