Skip to content
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

Jump to bottom

fix(a11y): prevent refocus of textarea on keyboard navigation #254

Merged
merged 7 commits into from
Sep 21, 2023
Merged

fix(a11y): prevent refocus of textarea on keyboard navigation #254

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fbabaf7
fix(a11y): prevent refocus of textarea on keyboard navigation
dancormier Sep 12, 2023
c3866d2
Update src/shared/menu/plugin.ts
dancormier Sep 13, 2023
6f6c5f2
Import hidePopover; rm dupe crusty code
dancormier Sep 13, 2023
2492724
Actually remove dupe crusty code
dancormier Sep 13, 2023
5e4c823
Merge branch 'main' into dcormier/fix-menu-keyboard-nav
dancormier Sep 21, 2023
b1a05ef
Add a test
dancormier Sep 21, 2023
3260f5d
Update editor.e2e.test.ts
dancormier Sep 21, 2023
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
1 change: 0 additions & 1 deletion src/shared/menu/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,6 @@ export function makeDropdownItem(
button.type = "button";
button.dataset.key = key;
button.textContent = title;
button.dataset.action = "s-popover#hide";
button.setAttribute("role", "menuitem");
button.className = `s-block-link s-editor--dropdown-item js-editor-btn`;

Expand Down
15 changes: 13 additions & 2 deletions src/shared/menu/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,18 @@ export class MenuView implements PluginView {
const key = (target as HTMLElement).dataset.key;

e.preventDefault();
view.focus();

dancormier marked this conversation as resolved.
Show resolved Hide resolved
// Conditional added to only focus view on mouse events, so keyboard navigation remains intact
// See https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
if (e.detail > 0) {
// Hide the menu popover if it's visible
const menu = (<HTMLElement>e.target).closest(".s-popover");
if (target.getAttribute("role") === "menuitem" && menu) {
menu?.classList.remove("is-visible");
target.setAttribute("aria-expanded", "false");
}
view.focus();
}

const found = menuCommands.find((c) => c.key === key);
const foundCommand = this.command(found);
Expand Down Expand Up @@ -319,7 +330,7 @@ export class MenuView implements PluginView {
button.setAttribute("aria-controls", popoverId);
button.setAttribute("data-action", "s-popover#toggle");
button.setAttribute("data-controller", "s-tooltip");
button.setAttribute("role", "menuitem");
button.setAttribute("role", "menu");
button.id = buttonId;
button.dataset.key = entry.key;

Expand Down