rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Reduced motion, touch hover, overscroll and artwork edges (#310 #311 #312 #313 #314 #315)

Browse Source 
Fixes from the UI-polish review of the main window (2026-10-19).

Reduced motion took every animation away, and a turning icon was the only sign a check was
running. The refresh buttons now carry aria-busy and a "Checking for new items" label while
checking, and under reduced motion spinners pulse and toasts and sheets fade.

Every :hover rule is behind @media (hover:hover), since Safari keeps :hover on the last thing
tapped; the two phone resets that undid it for .btn and .ep had nothing left to do and are gone.
An item row's actions still show on hover without the query, so a tablet with no pointer can
reach them by tapping the row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-20 15:16:41 +00:00
parent 6ec2c35291
commit 0696583547
4 changed files with 93 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tests/ui/app.spec.js
View File

@@ -1906,6 +1906,22 @@ test('a refresh button turns from the press to the end of the scan it asked for'
expect(await spin('#scanAll .i')).toBe('none');
});
test.describe('with motion reduced', () => {
test.use({ reducedMotion: 'reduce' });
test('a check running still shows, as a pulse and in its label', async ({ page }) => {
// Turning was all that showed it, and with motion reduced nothing turned (#310).
const all = page.locator('#scanAll');
await page.evaluate(() => spinStart(null));
await expect(all).toHaveAttribute('aria-busy', 'true');
await expect(all).toHaveAttribute('aria-label', 'Checking for new items…');
expect(await all.locator('.i').evaluate(el => getComputedStyle(el).animationName)).toBe('ipxpulse');
await page.evaluate(() => spinEnd({ only: null, forced: true }));
await expect(all).not.toHaveAttribute('aria-busy');
await expect(all).toHaveAttribute('aria-label', 'Check every feed for new items');
});
});
test.describe('on a narrow phone', () => {
test.use({ viewport: { width: 360, height: 760 } });