Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 14, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions core/src/components/picker-column-internal/picker-column-internal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
59 changes: 59 additions & 0 deletions core/src/components/picker-internal/test/basic/picker-internal.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down