Corrects ambiguity with native DOM first|lastChild properties

goodguyry · Apr 22, 2020 · 1312a99 · 1312a99
1 parent cfd5064
commit 1312a99
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/Dialog/index.js b/src/Dialog/index.js
@@ -239,25 +239,25 @@ export default class Dialog extends AriaComponent {
 
     if (expanded && keyCode === TAB) {
       const { activeElement } = document;
-      // @Todo Make a helper method to get these.
-      const lastIndex = this.interactiveChildren.length - 1;
-      const [firstChild] = this.interactiveChildren;
-      const lastChild = this.interactiveChildren[lastIndex];
+      const [firstInteractiveChild] = this.interactiveChildren;
+      const lastInteractiveChild = (
+        this.interactiveChildren[this.interactiveChildren.length - 1]
+      );
 
-      if (shiftKey && firstChild === activeElement) {
+      if (shiftKey && firstInteractiveChild === activeElement) {
         event.preventDefault();
         /*
          * Move back from the first interactive child element to the last
          * interactive child element
          */
-        lastChild.focus();
-      } else if (! shiftKey && lastChild === activeElement) {
+        lastInteractiveChild.focus();
+      } else if (! shiftKey && lastInteractiveChild === activeElement) {
         event.preventDefault();
         /*
          * Move forward from the last interactive child element to the first
          * interactive child element.
          */
-        firstChild.focus();
+        firstInteractiveChild.focus();
       }
     }
   }

diff --git a/src/Tablist/index.js b/src/Tablist/index.js
@@ -269,13 +269,13 @@ export default class Tablist extends AriaComponent {
     const { activeIndex } = this.state;
     const { keyCode, shiftKey } = event;
     const { activeElement } = document;
-    const [firstChild] = this.interactiveChildren;
+    const [firstInteractiveChild] = this.interactiveChildren;
 
     if (keyCode === TAB && shiftKey) {
       if (activeElement === this.panels[activeIndex]) {
         event.preventDefault();
         this.tabLinks[activeIndex].focus();
-      } else if (activeElement === firstChild) {
+      } else if (activeElement === firstInteractiveChild) {
         /*
          * Ensure navigating with Shift-TAB from the first interactive child of
          * the active panel returns focus to the active panel.