From 2e5bcb7366a71fb3bb860a70df1449aa5116fa55 Mon Sep 17 00:00:00 2001
From: yalo <yalo@cisco.com>
Date: Tue, 12 May 2020 15:20:37 -0700
Subject: [PATCH] fix(listitem): accessibility within listitem

---
 react/src/lib/ListItem/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/react/src/lib/ListItem/index.js b/react/src/lib/ListItem/index.js
index e492bb4230..86806ddb5d 100644
--- a/react/src/lib/ListItem/index.js
+++ b/react/src/lib/ListItem/index.js
@@ -125,6 +125,8 @@ 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');
@@ -132,6 +134,7 @@ class ListItem extends React.Component {
         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);
             }