diff --git a/components/settings/__tests__/settings-touch-targets.test.tsx b/components/settings/__tests__/settings-touch-targets.test.tsx new file mode 100644 index 000000000..315ceab92 --- /dev/null +++ b/components/settings/__tests__/settings-touch-targets.test.tsx @@ -0,0 +1,31 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; +import { SectionNav, Select, SettingItem, SettingsSection, ToggleSwitch } from '../settings-section'; + +// SET-22: on the phone, settings switches (44x24), jump chips (28px) and +// selects (29px) were smaller than the 44px a finger needs (R1). + +const HIT = 'pointer-coarse:after:min-h-11'; + +describe('settings touch targets', () => { + it('switches keep their size and get a 44px hit area', () => { + render( {}} />); + expect(screen.getByRole('switch').className).toContain(HIT); + }); + + it('jump chips get a 44px hit area', () => { + render( +
+ + + +
+ ); + expect(screen.getByRole('button', { name: 'One' }).className).toContain(HIT); + }); + + it('selects are 44px tall on a touch screen', () => { + render(