fix(a11y): fix accessibility issues across 5 components (#66)

- repo-browser: change outer <button> to <div> to fix invalid nested
  interactive elements, add keyboard handlers and aria-label to Manual button
- section-nav: remove incorrect role="listbox"/role="option" ARIA pattern,
  fix aria-current="true" to aria-current="location"
- table-editor: add aria-label to icon buttons (Move up/down, Remove row),
  add scope="col" to <th> elements
- section-editor: add aria-label to textarea text blocks
- spec-list: add tabindex="0" to suite-group treeitems for keyboard focus

Closes #62

Co-authored-by: Claude Opus 4.6 <[email protected]>

Author: corvid-agent

src/app/components/repo-browser/repo-browser.html

@@ -1,7 +1,7 @@
 <div class="repo-browser" role="region" aria-label="Repository browser">
   <div class="repo-browser-header">
     <h4 class="repo-browser-title" id="repo-browser-heading">Your Repositories</h4>
-    <button class="btn btn-sm" (click)="onManual()">Manual</button>
+    <button class="btn btn-sm" (click)="onManual()" aria-label="Enter repository details manually">Manual</button>
   </div>
 
   @if (initResult(); as result) {
@@ -41,14 +41,16 @@ <h4 class="repo-browser-title" id="repo-browser-heading">Your Repositories</h4>
 
       <div class="repo-list" role="list" aria-labelledby="repo-browser-heading">
         @for (repo of filteredRepos(); track repo.full_name) {
-          <button
+          <div
             class="repo-item"
             role="listitem"
             [class.has-specs]="repo.hasSpecs"
-            [disabled]="connecting() !== null || initializing() !== null"
             [attr.aria-busy]="connecting() === repo.full_name || initializing() === repo.full_name"
             [attr.aria-label]="repo.full_name + (repo.hasSpecs ? ' (specs found)' : '') + (repo.private ? ' (private)' : '')"
             (click)="onSelectRepo(repo)"
+            tabindex="0"
+            (keydown.enter)="onSelectRepo(repo)"
+            (keydown.space)="$event.preventDefault(); onSelectRepo(repo)"
           >
             <div class="repo-item-main">
               <div class="repo-item-name">
@@ -81,7 +83,7 @@ <h4 class="repo-browser-title" id="repo-browser-heading">Your Repositories</h4>
                 </button>
               }
             </div>
-          </button>
+          </div>
         }
       </div>
 

src/app/components/repo-browser/repo-browser.scss

@@ -78,12 +78,12 @@
   font-size: 13px;
   transition: background 0.1s, border-color 0.1s;
 
-  &:hover:not(:disabled) {
+  &:hover:not([aria-busy="true"]) {
     background: var(--hover);
     border-color: var(--accent, #58a6ff);
   }
 
-  &:disabled {
+  &[aria-busy="true"] {
     opacity: 0.6;
     cursor: default;
   }
@@ -92,7 +92,7 @@
     border-color: var(--status-active, #3fb950);
     background: rgba(63, 185, 80, 0.05);
 
-    &:hover:not(:disabled) {
+    &:hover:not([aria-busy="true"]) {
       background: rgba(63, 185, 80, 0.1);
     }
   }

src/app/components/section-editor/section-editor.html

@@ -38,6 +38,7 @@
               (ngModelChange)="onTextBlockChange(blockIdx, $event)"
               placeholder="Enter text..."
               rows="3"
+              [attr.aria-label]="'Text block ' + (blockIdx + 1)"
             ></textarea>
           }
         }

src/app/components/section-nav/section-nav.html

@@ -1,15 +1,15 @@
 <nav class="section-nav" aria-label="Spec sections">
   <h3 class="nav-title" id="section-nav-heading">Sections</h3>
-  <ul class="nav-list" role="listbox" aria-labelledby="section-nav-heading">
+  <ul class="nav-list" aria-labelledby="section-nav-heading">
     @for (item of navItems(); track item.label) {
-      <li role="option" [attr.aria-selected]="isActive(item)">
+      <li>
         <button
           class="nav-item"
           [class.active]="isActive(item)"
           [class.level-2]="item.type === 'section' && item.level === 2"
           [class.level-3]="item.type === 'section' && item.level >= 3"
           [class.frontmatter]="item.type === 'frontmatter'"
-          [attr.aria-current]="isActive(item) ? 'true' : null"
+          [attr.aria-current]="isActive(item) ? 'location' : null"
           (click)="onSelect(item.type === 'frontmatter' ? -1 : item.index)"
         >
           @if (item.type === 'frontmatter') {

src/app/components/spec-list/spec-list.html

@@ -9,7 +9,7 @@
 
   <div class="suite-scroll-area" role="tree" aria-label="Spec suites">
     @for (entry of store.suites() | keyvalue:suiteOrder; track entry.key) {
-      <div class="suite-group" role="treeitem" [attr.aria-expanded]="!isSuiteCollapsed(entry.key)">
+      <div class="suite-group" role="treeitem" [attr.aria-expanded]="!isSuiteCollapsed(entry.key)" tabindex="0">
         <button
           class="suite-header"
           [class.collapsed]="isSuiteCollapsed(entry.key)"

src/app/components/table-editor/table-editor.html

@@ -4,9 +4,9 @@
       <thead>
         <tr>
           @for (header of table().headers; track $index) {
-            <th>{{ header }}</th>
+            <th scope="col">{{ header }}</th>
           }
-          <th class="actions-col"></th>
+          <th scope="col" class="actions-col"></th>
         </tr>
       </thead>
       <tbody>
@@ -26,12 +26,12 @@
             <td class="actions-cell">
               <div class="row-actions">
                 @if (rowIdx > 0) {
-                  <button class="btn-icon" (click)="moveRowUp(rowIdx)" title="Move up">&#8593;</button>
+                  <button class="btn-icon" (click)="moveRowUp(rowIdx)" title="Move up" aria-label="Move up">&#8593;</button>
                 }
                 @if (rowIdx < table().rows.length - 1) {
-                  <button class="btn-icon" (click)="moveRowDown(rowIdx)" title="Move down">&#8595;</button>
+                  <button class="btn-icon" (click)="moveRowDown(rowIdx)" title="Move down" aria-label="Move down">&#8595;</button>
                 }
-                <button class="btn-icon btn-danger" (click)="removeRow(rowIdx)" title="Remove row">&times;</button>
+                <button class="btn-icon btn-danger" (click)="removeRow(rowIdx)" title="Remove row" aria-label="Remove row">&times;</button>
               </div>
             </td>
           </tr>