Feature 15: Recipe Detail and Kitchen Reading Mode (#162)

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

web/src/ui/IconButton.module.css

@@ -24,6 +24,11 @@
   margin: -2px;
 }
 
+.size52 {
+  width: 52px;
+  height: 52px;
+}
+
 .size62 {
   width: 62px;
   height: 62px;
@@ -56,6 +61,11 @@
   height: 40px;
 }
 
+.size52 .face {
+  width: 52px;
+  height: 52px;
+}
+
 .size62 .face {
   width: 62px;
   height: 62px;

web/src/ui/IconButton.test.tsx

@@ -26,6 +26,13 @@ describe('IconButton', () => {
     expect(hitArea(face)).toEqual({ width: 40, height: 40 })
   })
 
+  it('is 52 px at the medium size', () => {
+    render(<IconButton label="Favorite" size={52} />)
+    const button = screen.getByRole('button', { name: 'Favorite' })
+    expectMinHitArea(button)
+    expect(hitArea(button)).toEqual({ width: 52, height: 52 })
+  })
+
   it('is 62 px at the large size', () => {
     render(<IconButton label="Try it" size={62} tone="teal" />)
     const button = screen.getByRole('button', { name: 'Try it' })

web/src/ui/IconButton.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithRef } from 'react'
 import styles from './IconButton.module.css'
 
-export type IconButtonSize = 40 | 62
+export type IconButtonSize = 40 | 52 | 62
 export type IconButtonTone = 'surface' | 'neutral' | 'accent' | 'teal'
 
 export type IconButtonProps = Omit<ComponentPropsWithRef<'button'>, 'aria-label'> & {
@@ -15,7 +15,8 @@ export type IconButtonProps = Omit<ComponentPropsWithRef<'button'>, 'aria-label'
 }
 
 // Round icon button, named by its label and showing it only with showLabel.
-// The 40 px size keeps a 44 px hit box (see the CSS); the 62 px size is the
+// The 40 px size keeps a 44 px hit box (see the CSS); the 52 px size sits
+// beside a 52 px pill button, as the recipe's heart; the 62 px size is the
 // round action button with --shadow-md.
 export function IconButton({
   label,

web/src/ui/Segmented.test.tsx

@@ -83,6 +83,16 @@ describe('Segmented', () => {
     for (const option of screen.getAllByRole('radio')) expectMinHitArea(option)
   })
 
+  it('names an option by its ariaLabel when it has one', () => {
+    const sizes = [
+      { value: 'small', label: 'A', ariaLabel: 'Small text' },
+      { value: 'large', label: 'A', ariaLabel: 'Large text' },
+    ] as const
+    render(<Segmented label="Text size" options={sizes} value="large" onValueChange={() => {}} />)
+    expect(radio('Small text')).toHaveTextContent('A')
+    expect(radio('Large text')).toHaveAttribute('aria-checked', 'true')
+  })
+
   it('fails fast when the value is not one of the options', () => {
     expect(() =>
       render(<Segmented label="Archive period" options={options} value={'decade' as Period} onValueChange={() => {}} />),

web/src/ui/Segmented.tsx

@@ -4,6 +4,9 @@ import styles from './Segmented.module.css'
 export type SegmentedOption<T extends string> = {
   value: T
   label: string
+  // Accessible name, when the visible label alone does not say what the
+  // option is (the A / A / A of a text size).
+  ariaLabel?: string
 }
 
 export type SegmentedProps<T extends string> = {
@@ -63,6 +66,7 @@ export function Segmented<T extends string>({ label, options, value, onValueChan
             type="button"
             role="radio"
             aria-checked={checked}
+            aria-label={option.ariaLabel}
             tabIndex={checked ? 0 : -1}
             className={checked ? `${styles.option} ${styles.selected}` : styles.option}
             onClick={() => select(index)}