Skip to content

Commit

Permalink
fix: check if popover target has focusElement as focusable (#8732) (#…
Browse files Browse the repository at this point in the history 
…8743)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
  • Loading branch information
@vaadin-bot @web-padawan
vaadin-bot and web-padawan authored Feb 26, 2025
1 parent 8f5ec01 commit ef0290d
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 65 deletions.
20 changes: 15 additions & 5 deletions packages/popover/src/vaadin-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -666,7 +666,7 @@ class Popover extends PopoverPositionMixin(
const overlayPart = this._overlayElement.$.overlay;

// Move focus to the popover content on target element Tab
if (this.target && isElementFocused(this.target)) {
if (this.target && isElementFocused(this.__getTargetFocusable())) {
event.preventDefault();
overlayPart.focus();
return;
Expand All @@ -675,7 +675,7 @@ class Popover extends PopoverPositionMixin(
// Move focus to the next element after target on content Tab
const lastFocusable = this.__getLastFocusable(overlayPart);
if (lastFocusable && isElementFocused(lastFocusable)) {
const focusable = this.__getNextBodyFocusable(this.target);
const focusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
if (focusable && focusable !== overlayPart) {
event.preventDefault();
focusable.focus();
Expand All @@ -698,20 +698,20 @@ class Popover extends PopoverPositionMixin(
const overlayPart = this._overlayElement.$.overlay;

// Prevent restoring focus after target blur on Shift + Tab
if (this.target && isElementFocused(this.target) && this.__shouldRestoreFocus) {
if (this.target && isElementFocused(this.__getTargetFocusable()) && this.__shouldRestoreFocus) {
this.__shouldRestoreFocus = false;
return;
}

// Move focus back to the target on overlay content Shift + Tab
if (this.target && isElementFocused(overlayPart)) {
event.preventDefault();
this.target.focus();
this.__getTargetFocusable().focus();
return;
}

// Move focus back to the popover on next element Shift + Tab
const nextFocusable = this.__getNextBodyFocusable(this.target);
const nextFocusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
if (nextFocusable && isElementFocused(nextFocusable)) {
const lastFocusable = this.__getLastFocusable(overlayPart);
if (lastFocusable) {
Expand All @@ -734,6 +734,16 @@ class Popover extends PopoverPositionMixin(
return focusables.pop();
}

/** @private */
__getTargetFocusable() {
if (!this.target) {
return null;
}

// If target has `focusElement`, check if that one is focused.
return this.target.focusElement || this.target;
}

/** @private */
__onTargetFocusIn() {
this.__focusInside = true;
Expand Down
133 changes: 73 additions & 60 deletions packages/popover/test/a11y.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,94 +369,107 @@ describe('a11y', () => {
});

describe('Tab order', () => {
let input;
['default', 'focusElement'].forEach((suite) => {
describe(suite, () => {
let input;

beforeEach(async () => {
input = document.createElement('input');
target.parentElement.appendChild(input);
beforeEach(async () => {
input = document.createElement('input');
target.parentElement.appendChild(input);

popover.trigger = [];
popover.opened = true;
await nextRender();
});
popover.trigger = [];
popover.opened = true;

it('should focus the overlay content part on target Tab', async () => {
target.focus();
if (suite === 'focusElement') {
const wrapper = document.createElement('div');
target.parentElement.insertBefore(wrapper, target);
wrapper.focusElement = target;
wrapper.appendChild(target);

const spy = sinon.spy(overlay.$.overlay, 'focus');
await sendKeys({ press: 'Tab' });
popover.target = wrapper;
}
await nextRender();
});

expect(spy).to.be.calledOnce;
});
it('should focus the overlay content part on target Tab', async () => {
target.focus();

it('should focus the target on overlay content part Shift Tab', async () => {
target.focus();
const spy = sinon.spy(overlay.$.overlay, 'focus');
await sendKeys({ press: 'Tab' });

// Move focus to the overlay
await sendKeys({ press: 'Tab' });
expect(spy).to.be.calledOnce;
});

const spy = sinon.spy(target, 'focus');
it('should focus the target on overlay content part Shift Tab', async () => {
target.focus();

// Move focus back to the target
await sendKeys({ press: 'Shift+Tab' });
// Move focus to the overlay
await sendKeys({ press: 'Tab' });

expect(spy).to.be.calledOnce;
});
const spy = sinon.spy(target, 'focus');

it('should focus the next element after target on last overlay child Tab', async () => {
target.focus();
// Move focus back to the target
await sendKeys({ press: 'Shift+Tab' });

// Move focus to the overlay
await sendKeys({ press: 'Tab' });
expect(spy).to.be.calledOnce;
});

// Move focus to the input inside the overlay
await sendKeys({ press: 'Tab' });
it('should focus the next element after target on last overlay child Tab', async () => {
target.focus();

const spy = sinon.spy(input, 'focus');
// Move focus to the overlay
await sendKeys({ press: 'Tab' });

// Move focus to the input after the overlay
await sendKeys({ press: 'Tab' });
// Move focus to the input inside the overlay
await sendKeys({ press: 'Tab' });

expect(spy).to.be.calledOnce;
});
const spy = sinon.spy(input, 'focus');

it('should focus the last overlay child on the next element Shift Tab', async () => {
input.focus();
// Move focus to the input after the overlay
await sendKeys({ press: 'Tab' });

const focusable = overlay.querySelector('input');
const spy = sinon.spy(focusable, 'focus');
expect(spy).to.be.calledOnce;
});

await sendKeys({ press: 'Shift+Tab' });
it('should focus the last overlay child on the next element Shift Tab', async () => {
input.focus();

expect(spy).to.be.calledOnce;
});
const focusable = overlay.querySelector('input');
const spy = sinon.spy(focusable, 'focus');

it('should not focus the overlay part on the next element Tab', async () => {
input.focus();
await sendKeys({ press: 'Shift+Tab' });

await sendKeys({ press: 'Tab' });
expect(spy).to.be.calledOnce;
});

const activeElement = getDeepActiveElement();
expect(activeElement).to.not.equal(overlay.$.overlay);
});
it('should not focus the overlay part on the next element Tab', async () => {
input.focus();

it('should focus previous element on target Shift Tab while opened', async () => {
target.parentElement.insertBefore(input, target);
await sendKeys({ press: 'Tab' });

// Make popover open on focus
popover.opened = false;
popover.trigger = ['focus'];
await nextUpdate(popover);
const activeElement = getDeepActiveElement();
expect(activeElement).to.not.equal(overlay.$.overlay);
});

it('should focus previous element on target Shift Tab while opened', async () => {
target.parentElement.insertBefore(input, target);

target.focus();
await nextRender();
// Make popover open on focus
popover.opened = false;
popover.trigger = ['focus'];
await nextUpdate(popover);

// Move focus back from the target
await sendKeys({ press: 'Shift+Tab' });
await nextRender();
target.focus();
await nextRender();

const activeElement = getDeepActiveElement();
expect(activeElement).to.equal(input);
// Move focus back from the target
await sendKeys({ press: 'Shift+Tab' });
await nextRender();

const activeElement = getDeepActiveElement();
expect(activeElement).to.equal(input);
});
});
});
});
});

0 comments on commit ef0290d

Please sign in to comment.