Accessibility pass (#189)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/shell/BottomBar.module.css

@@ -48,6 +48,12 @@
   color: var(--on-accent);
 }
 
+/* The app-wide grape focus ring barely shows on the dark bar (1.8:1); the
+   bar's ring is the light on-accent ink instead. */
+.item:focus-visible {
+  outline-color: var(--on-accent);
+}
+
 .label {
   font-family: var(--font-body);
   font-size: 13px;

web/src/shell/BottomBar.test.tsx

@@ -182,6 +182,18 @@ describe('BottomBar', () => {
     ])
   })
 
+  it('rings a focused item in on-accent ink, which shows on the dark bar', async () => {
+    await renderAt('/')
+    const item = link('Plan')
+    // A key press makes the next focus a keyboard one, which :focus-visible
+    // matches; earlier tests' clicks would leave it a pointer one.
+    fireEvent.keyDown(document.body, { key: 'Tab' })
+    item.focus()
+    expect(item).toHaveFocus()
+    expect(item.matches(':focus-visible')).toBe(true)
+    expect(declaredStyle(item).getPropertyValue('outline-color')).toBe('var(--on-accent)')
+  })
+
   it('does not animate when the active item stays the same', async () => {
     await renderAt('/plan')
     fireEvent.click(link('Plan'))