- 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