fix(listitem): accessibility within listitem

momentum-design · Jun 10, 2020 · 2e5bcb7 · 2e5bcb7
1 parent c8e663e
commit 2e5bcb7
Showing 1 changed file with 3 additions and 0 deletions.
diff --git a/react/src/lib/ListItem/index.js b/react/src/lib/ListItem/index.js
@@ -125,13 +125,16 @@ class ListItem extends React.Component {
   handleBlur = (e, focusLockTabbableChildren, tabbableChildrenQuery) => {
     const { onBlur } = this.props;
 
+    // For when you click or navigate away from the current listitem
+    // Cleans up tabindex="0" before you navigate away
     if (focusLockTabbableChildren) {
       if (e.target) {
         const currListItem = e.target.closest('.md-list-item');
         const tabbableChildren = currListItem.querySelectorAll(tabbableChildrenQuery);
         if (currListItem && tabbableChildren.length) {
           if (e.relatedTarget) {
             const newFocus = e.relatedTarget.closest('.md-list-item');
+            // If the element that is going to get focus is not the current listitem or the children in it
             if (newFocus && currListItem !== newFocus) {
               this.changeTabIndex(tabbableChildren, -1);
             }