Skip to content

Commit bfd33e1

Browse files
fix(a11y): update tests for GlassNumberStepper and increase button size
- Update accessibility test to use data-testid instead of spinbutton role (GlassNumberStepper uses type="text" with inputMode="numeric") - Increase Original theme button width from w-10 to w-12 (48px) to meet WCAG touch target minimum of 44px
1 parent 8521c11 commit bfd33e1

File tree

2 files changed

+10
-4
lines changed

2 files changed

+10
-4
lines changed

components/ui/GlassNumberStepper.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,7 @@ export const GlassNumberStepper = memo(function GlassNumberStepper({
268268
aria-label={`Decrease ${label || 'value'}`}
269269
className={`
270270
flex items-center justify-center
271-
w-10 h-14
271+
w-12 h-14
272272
bg-bg-secondary
273273
text-text-primary
274274
transition-colors duration-200
@@ -316,7 +316,7 @@ export const GlassNumberStepper = memo(function GlassNumberStepper({
316316
aria-label={`Increase ${label || 'value'}`}
317317
className={`
318318
flex items-center justify-center
319-
w-10 h-14
319+
w-12 h-14
320320
bg-bg-secondary
321321
text-text-primary
322322
transition-colors duration-200

e2e/accessibility.spec.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,17 @@ test.describe('Accessibility Tests', () => {
6767
await page.goto('/en')
6868

6969
// Check for minute and second inputs with labels
70-
const minuteInput = page.getByRole('spinbutton', { name: /minutes/i })
71-
const secondInput = page.getByRole('spinbutton', { name: /seconds/i })
70+
// GlassNumberStepper uses type="text" with inputMode="numeric" instead of type="number"
71+
// so we use data-testid selectors instead of spinbutton role
72+
const minuteInput = page.getByTestId('time-input-minutes')
73+
const secondInput = page.getByTestId('time-input-seconds')
7274

7375
await expect(minuteInput).toBeVisible()
7476
await expect(secondInput).toBeVisible()
77+
78+
// Verify aria-label is set for accessibility
79+
await expect(minuteInput).toHaveAttribute('aria-label', 'Minutes')
80+
await expect(secondInput).toHaveAttribute('aria-label', 'Seconds')
7581
})
7682

7783
test('color contrast meets WCAG AA standards', async ({ page }) => {

0 commit comments

Comments
 (0)