Adjust the option focusVisible when calling HTMLElement.focus() and i…

…mprove focusable detection (#259)

src/content/actions/focus.ts

@@ -1,13 +1,10 @@
 import { TalonAction } from "../../typings/RequestFromTalon";
 import { notify } from "../notify/notify";
 import { dispatchKeyDown, dispatchKeyUp } from "../utils/dispatchEvents";
-import { editableElementSelector } from "../utils/domUtils";
+import { editableElementSelector, getFocusable } from "../utils/domUtils";
 import { ElementWrapper } from "../../typings/ElementWrapper";
 import { getWrapperForElement } from "../wrappers/wrappers";
 
-const focusableSelector =
-	"a, area[href], button, frame, iframe, input, object, select, textarea, summary, [tabindex]";
-
 export function focus(wrappers: ElementWrapper[]): TalonAction[] | undefined {
 	window.focus();
 
@@ -16,13 +13,10 @@ export function focus(wrappers: ElementWrapper[]): TalonAction[] | undefined {
 			dispatchKeyDown(document.activeElement, "Tab");
 		}
 
-		const focusable = wrapper.element.matches(focusableSelector)
-			? wrapper.element
-			: wrapper.element.querySelector(focusableSelector) ??
-			  wrapper.element.closest(focusableSelector);
+		const focusable = getFocusable(wrapper.element);
 
 		if (focusable instanceof HTMLElement) {
-			focusable.focus();
+			focusable.focus({ focusVisible: true });
 			dispatchKeyUp(focusable, "Tab");
 		}
 	}

src/content/utils/dispatchEvents.ts

@@ -1,6 +1,6 @@
 import { setSelectionAtEdge } from "../actions/setSelection";
 import { getElementCenter } from "./cssomUtils";
-import { isEditable } from "./domUtils";
+import { getFocusable, isEditable } from "./domUtils";
 
 // At the moment this only works in Firefox but it seems it's going to be
 // implemented in the other browsers.
@@ -51,8 +51,9 @@ export function dispatchClick(element: Element): boolean {
 	element.dispatchEvent(pointerEvent("pointerdown", clientX, clientY));
 	element.dispatchEvent(mouseEvent("mousedown", clientX, clientY));
 
-	if (element instanceof HTMLElement) {
-		element.focus({ focusVisible: false });
+	const focusable = getFocusable(element);
+	if (focusable instanceof HTMLElement) {
+		focusable.focus({ focusVisible: isEditable(focusable) });
 	}
 
 	if (element instanceof HTMLElement && isEditable(element)) {

src/content/utils/domUtils.ts

@@ -38,3 +38,20 @@ export function getActiveElement() {
 
 	return activeElement;
 }
+
+const focusableSelector =
+	":is(a[href], area[href], input, select, textarea, button, iframe, object, summary, [tabindex]):not(:is([disabled], [tabindex='-1'], [contenteditable='false']))";
+
+/**
+ * Returns the element itself if it's focusable. If not, the closest focusable
+ * descendant or ascendant, in that order.
+ * The reason to check descendants is for instances where we mark as hintable
+ * the parent and not the child. For example, if the parent is a wrapper
+ * div[role="button"] and the child is a button.
+ */
+export function getFocusable(element: Element) {
+	return element.matches(focusableSelector)
+		? element
+		: element.querySelector(focusableSelector) ??
+				element.closest(focusableSelector);
+}