Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
core/src/components/tabs/test/a11y/tab-button-dark-focused.e2e.ts
Outdated
Show resolved
Hide resolved
core/src/components/tabs/test/a11y/tab-button-dark-focused.e2e.ts
Outdated
Show resolved
Hide resolved
core/src/components/tabs/test/a11y/tab-button-dark-focused.e2e.ts
Outdated
Show resolved
Hide resolved
ShaneK
changed the title
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Nice improvements! A couple of new things
| config | ||
| ); | ||
|
|
||
| await expect(page.locator('ion-tab-bar')).toHaveScreenshot(screenshot('tab-bar-focused-dark')); |
There was a problem hiding this comment.
screenshot('tab-bar-focused-dark') ends up with -dark twice in the filename since configs({ palettes: ['dark'] }) appends it automatically. Also, the other screenshots in this file all use a tab-button-focus- prefix, not tab-bar-. Something like screenshot('tab-button-focus') would match both conventions.
Small thing too: the other tests in this file pull out const tabBar = page.locator('ion-tab-bar') before the assertion (lines 19, 35, 59, 77). You should consider matching this style for consistency
| }); | ||
| }); | ||
|
|
||
| configs({ palettes: ['dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { |
There was a problem hiding this comment.
The other two blocks in this file nest tests inside test.describe('focus', ...). Should this follow the same pattern? Something like title('tab-button: states in dark palette') with a nested test.describe('focus', ...) inside
3 participants
Issue number: resolves resolves internal
What is the current behavior?
In the dark palette, the
--ion-tab-bar-background-focusedCSS token was not defined.When a
ion-tab-buttonreceives focus, the::afteroverlay on.button-nativefalls back toget-color-shade(#fff)→#e0e0e0— a light grey that blends into the dark background and makes the focus indicator invisible.What is the new behavior?
--ion-tab-bar-background-focusedis now defined in the dark palette:#0b0b0bfor iOS (shade of the near-black iOS tab bar) and#1b1b1bfor MD (shade of--ion-tab-bar-background: #1f1f1f), providing a dark-appropriate focus indicator.The same token is added to
high-contrast-dark.scsswith the same values.tab-button/test/states/(where the existing focused-state tests live) usingconfigs({ palettes: ['dark'] })andpage.setContent()withclass="ion-focused"applied directly, matching the established pattern for focus-state testing in this component.Does this introduce a breaking change?
Other information
The test triggers keyboard mode (required by
focus-visible.ts) before focusing the inner<a>element inside the tab button's shadow DOM, since calling.focus()on the host element is a no-op withoutdelegatesFocus.