javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(picker-column-internal): tabbing between columns works (#25464)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-06-14 11:38:13 -04:00
committed by GitHub
parent ec4a36ea4e
commit db027721ac
2 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/picker-column-internal/picker-column-internal.tsx
View File

@ -306,8 +306,19 @@ export class PickerColumnInternal implements ComponentInterface {
<div class="picker-item picker-item-empty">&nbsp;</div>
<div class="picker-item picker-item-empty">&nbsp;</div>
{items.map((item, index) => {
{
/*
Users should be able to tab
between multiple columns. As a result,
we set tabindex here so that tabbing switches
between columns instead of buttons. Users
can still use arrow keys on the keyboard to
navigate the column up and down.
*/
}
return (
<button
tabindex="-1"
class={{
'picker-item': true,
'picker-item-disabled': item.disabled || false,

59
core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
View File

@ -12,6 +12,65 @@ test.describe('picker-internal', () => {
);
});
test.describe('picker-internal: focus', () => {
test.beforeEach(async ({ page }) => {
await page.setContent(`
<ion-picker-internal>
<ion-picker-column-internal value="full-stack" id="first"></ion-picker-column-internal>
<ion-picker-column-internal value="onion" id="second"></ion-picker-column-internal>
</ion-picker-internal>
<script>
const columns = document.querySelectorAll('ion-picker-column-internal');
columns[0].items = [
{ text: 'Minified', value: 'minified' },
{ text: 'Responsive', value: 'responsive' },
{ text: 'Full Stack', value: 'full-stack' },
{ text: 'Mobile First', value: 'mobile-first' },
{ text: 'Serverless', value: 'serverless' },
]
columns[1].items = [
{ text: 'Tomato', value: 'tomato' },
{ text: 'Avocado', value: 'avocado' },
{ text: 'Onion', value: 'onion' },
{ text: 'Potato', value: 'potato' },
{ text: 'Artichoke', value: 'artichoke' },
];
</script>
`);
});
test('tabbing should correctly move focus between columns', async ({ page }) => {
const firstColumn = page.locator('ion-picker-column-internal#first');
const secondColumn = page.locator('ion-picker-column-internal#second');
// Focus first column
await page.keyboard.press('Tab');
expect(firstColumn).toBeFocused();
await page.waitForChanges();
// Focus second column
await page.keyboard.press('Tab');
expect(secondColumn).toBeFocused();
});
test('tabbing should correctly move focus back', async ({ page }) => {
const firstColumn = page.locator('ion-picker-column-internal#first');
const secondColumn = page.locator('ion-picker-column-internal#second');
await secondColumn.focus();
expect(secondColumn).toBeFocused();
await page.waitForChanges();
// Focus first column
await page.keyboard.press('Shift+Tab');
expect(firstColumn).toBeFocused();
});
});
test.describe('within overlay:', () => {
// TODO (FW-1397): Remove this test.skip when the issue is fixed.
test.skip(true, 'Mobile Safari and Chrome on Linux renders the selected option incorrectly');