- From: Nige White <notifications@github.com>
- Date: Thu, 05 Aug 2021 05:02:04 -0700
- To: whatwg/dom <dom@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <whatwg/dom/issues/1005/893402268@github.com>
I'm detecting focusable descendants within a whole set of focusable "containers" for A11Y purposes.
I have a single `TreeWalker` who's root is the outermost element which contains these visitable containers.
On `focusIn`, I collect the focusable descendants:
```
initialize() {
const me = this;
// Listen for focusin events so we can catch focus landing on our cells.
me.element.addEventListener('focusin', me.onFocusIn.bind(me));
me.treeWalker = document.createTreeWalker(me.element, nodeFilter.SHOW_ELEMENT, {
acceptNode(node) {
// Walked outside our current cell. Stop traverse.
// We don't want it to walk on to the end of the document!
if (!me.currentCell.contains(node)) {
return NodeFilter.FILTER_ABORT;
}
// Found a focusable node, visit it.
if (MyHelperClass.isFocusable(node)) {
return NodeFilter.FILTER_ACCEPT;
}
// Try next node
return NodeFilter.FILTER_SKIP;
}
});
}
onFocusIn(focusInEvent) {
// Stepped on a container cell...
if (focusInEvent.target.matches(this.visitableCellSelector)) {
this.focusableDescendants = [];
// Capture our "currentCell", so that our node accepter can tell when we've traversed outside of it.
this.treeWalker.currentNode = this.currentCell = focusInEvent.target;
// Collect all our focusable descendants
for (let focusable = this.treeWalker.nextNode(); focusable; focusable = this.treeWalker.nextNode()) {
this.focusableDescendants.push(focusable);
}
}
```
Warning: Code is typed in. May contain syntax errors!
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1005#issuecomment-893402268
Received on Thursday, 5 August 2021 12:02:17 UTC