test(buttons): the arrowed radio's ring follows the engine's :focus-visible, which WebKit drops

Author: joeworkman

test/browser/components/buttons.spec.js

@@ -51,16 +51,22 @@ test.describe('buttons', () => {
 		expect(await style(page, '#s3', 'opacity')).toBe(await page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue('--yeti-opacity-muted').trim()));
 	});
 
-	test('the arrow keys move the choice, and the focused label rises and draws the ring', async ({ page }) => {
+	test('the arrow keys move the choice, and the focused label rises and draws the ring', async ({ page, browserName }) => {
 		await open(page);
 		await page.focus('#s1-input');
+		expect(await style(page, '#s1', 'outline-style')).toBe('solid');
+		expect(await px(page, '#s1', 'outline-width')).toBe(2);
 		await page.keyboard.press('ArrowRight');
 		expect(await page.isChecked('#s2-input')).toBe(true);
 		expect(await page.isChecked('#s1-input')).toBe(false);
 		expect(await page.evaluate(() => document.activeElement.id)).toBe('s2-input');
-		expect(await style(page, '#s2', 'outline-style')).toBe('solid');
-		expect(await px(page, '#s2', 'outline-width')).toBe(2);
-		expect(await style(page, '#s2', 'z-index')).toBe('1');
+		// The ring follows the input's :focus-visible, and WebKit stops matching
+		// it on a radio that the arrow keys focus, as it does for a bare radio;
+		// the filled segment still shows where the choice, and the focus, is.
+		const ringAfterArrow = await page.evaluate(() => document.activeElement.matches(':focus-visible'));
+		if (browserName !== 'webkit') expect(ringAfterArrow).toBe(true);
+		expect(await style(page, '#s2', 'outline-style')).toBe(ringAfterArrow ? 'solid' : 'none');
+		expect(await style(page, '#s2', 'z-index')).toBe(ringAfterArrow ? '1' : 'auto');
 	});
 
 	test('an affixed group short of room stays one row, its labels wrapping inside', async ({ page }) => {