feat(List): add focusQuery and focusFirstQuery props

momentum-design · Jun 18, 2019 · 2105ac7 · 2105ac7
1 parent a669735
commit 2105ac7
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 16 deletions.
diff --git a/react/src/lib/DeviceListCall/tests/__snapshots__/index.spec.js.snap b/react/src/lib/DeviceListCall/tests/__snapshots__/index.spec.js.snap
@@ -62,6 +62,8 @@ ShallowWrapper {
       ],
       "className": "",
       "focusFirst": true,
+      "focusFirstQuery": "",
+      "focusQuery": "",
       "id": null,
       "itemRole": "listitem",
       "onSelect": [Function],
@@ -150,6 +152,8 @@ ShallowWrapper {
         ],
         "className": "",
         "focusFirst": true,
+        "focusFirstQuery": "",
+        "focusQuery": "",
         "id": null,
         "itemRole": "listitem",
         "onSelect": [Function],

diff --git a/react/src/lib/List/index.js b/react/src/lib/List/index.js
@@ -60,10 +60,11 @@ class List extends React.Component {
   }
 
   determineInitialFocus = () => {
-    const items = qsa(this.listNode, `.md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)`);
+    const { focusFirstQuery } = this.props;
+    const items = qsa(this.listNode, focusFirstQuery || `.md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)`);
 
     this._needsRefocus = true;
-    items.length && this.getNextFocusedChild(items[0], 0);
+    items.length && this.getNextFocusedChild(items, items[0], 0);
   }
 
   getIncludesFirstCharacter = (str, char) =>
@@ -72,12 +73,11 @@ class List extends React.Component {
     .toLowerCase()
     .includes(char);
 
-  getNextFocusedChild(current, offset) {
+  getNextFocusedChild(items, current, offset) {
     if (!this.listNode) return null;
     const { shouldLoop } = this.props;
     const { listContext } = this.state;
 
-    const items = qsa(this.listNode, `.md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)`);
     const possibleIndex = items.indexOf(current) + offset;
 
     const getIndex = () => {
@@ -104,15 +104,27 @@ class List extends React.Component {
   getValue = (arr, index, attribute) => (
     arr[index].attributes[`data-md-${attribute}-key`]
       && arr[index].attributes[`data-md-${attribute}-key`].value
-  );
+  )
+
+  getFocusableItems = () => {
+    if (!this.listNode) return null;
+    const { focusQuery } = this.props;
+
+    const defaultItems = qsa(this.listNode, `.md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)`);
+    const customItems = focusQuery && qsa(this.listNode, focusQuery) || [];
+
+    return customItems.length 
+      ? customItems.filter(item => customItems.indexOf(item) >= 0) 
+      : defaultItems;
+  }
 
   handleKeyDown = e => {
     const { shouldFocusActive } = this.props;
     const { focus } = this.state.listContext;
     let clickEvent;
     const tgt = e.currentTarget;
     const char = e.key;
-    const items = qsa(this.listNode, `.md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)`);
+    const items = this.getFocusableItems();
     const length = items.length && items.length - 1 || 0;
     const focusIdx = focus && items.indexOf(this.listNode.querySelector(`[data-md-event-key="${focus}"]`)) || 0;
     let flag = false;
@@ -149,14 +161,14 @@ class List extends React.Component {
 
       case 38:
       case 37:
-        this.getNextFocusedChild(tgt, -1);
+        this.getNextFocusedChild(items, tgt, -1);
         this._needsRefocus = true;
         flag = true;
         break;
 
       case 39:
       case 40:
-        this.getNextFocusedChild(tgt, 1);
+        this.getNextFocusedChild(items, tgt, 1);
         this._needsRefocus = true;
         flag = true;
         break;
@@ -193,10 +205,11 @@ class List extends React.Component {
     const { onSelect, trackActive } = this.props;
     const { active } = this.state.listContext;
     const { eventKey, label, value } = opts;
-    const items = qsa(this.listNode, '.md-list-item');
+
+    const items = this.getFocusableItems();
     const index = items.indexOf(this.listNode.querySelector(`[data-md-event-key="${eventKey}"]`));
 
-    this.setFocus(index);
+    this.setFocus(items, index);
     // Don't do anything if onSelect Event Handler is present
     if (onSelect) {
       return onSelect(e, {
@@ -223,18 +236,16 @@ class List extends React.Component {
           active: this.getValue(items, index, 'event')
         }
       }));
-  };
-
-  setFocus = index => {
-    const items = qsa(this.listNode, '.md-list-item');
+  }
 
+  setFocus = (items, index) => {
     this.setState(state => ({
       listContext: {
         ...state.listContext,
         focus: this.getValue(items, index, 'event'),
       }
     }));
-  };
+  }
 
   setFocusByFirstCharacter = (char, focusIdx, items, length) => {
     const { listContext } = this.state;
@@ -307,6 +318,8 @@ class List extends React.Component {
 
     const otherProps = omit({...props}, [
       'focusFirst',
+      'focusFirstQuery',
+      'focusQuery',
       'itemRole',
       'shouldFocusActive',
       'shouldLoop',
@@ -363,6 +376,10 @@ List.propTypes = {
   className: PropTypes.string,
   /** @prop Sets first List item to have focus | true */
   focusFirst: PropTypes.bool,
+  /** @prop Queries children to find matching item to have focus | '' */
+  focusFirstQuery: PropTypes.string,
+  /** @prop Additional elements that can be focused by selector | '' */
+  focusQuery: PropTypes.string,
   /** @prop Optional ID value of List | null */
   id: PropTypes.string,
   /** @prop Optional tabType prop type to manually set child role | 'listitem' */
@@ -392,6 +409,8 @@ List.defaultProps = {
   id: null,
   itemRole: 'listitem',
   focusFirst: true,
+  focusFirstQuery: '',
+  focusQuery: '',
   onSelect: null,
   role: 'list',
   shouldFocusActive: false,

diff --git a/react/src/lib/List/tests/__snapshots__/index.spec.js.snap b/react/src/lib/List/tests/__snapshots__/index.spec.js.snap
@@ -7,6 +7,8 @@ ShallowWrapper {
     active={null}
     className=""
     focusFirst={true}
+    focusFirstQuery=""
+    focusQuery=""
     id="test"
     itemRole="listitem"
     onSelect={null}

diff --git a/react/src/lib/SidebarNav/index.js b/react/src/lib/SidebarNav/index.js
@@ -11,6 +11,7 @@ class SidebarNav extends React.PureComponent {
     const {
       children,
       className,
+      focusQuery,
       headerNode,
       title,
       ...props
@@ -36,7 +37,14 @@ class SidebarNav extends React.PureComponent {
                 ' md-sidebar-nav__group--primary' +
                 `${(className && ` ${className}`) || ''}`
               }
-              {...props}>
+              focusQuery={`
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                ${focusQuery ? `, ${focusQuery}` : ''}
+              `}
+              {...props}
+            >
               {children}
             </List>
           </div>
@@ -53,6 +61,8 @@ SidebarNav.propTypes = {
   children: PropTypes.node,
   /** @prop Optional css class string | ''  */
   className: PropTypes.string,
+  /** @prop Additional elements that can be focused by selector | '' */
+  focusQuery: PropTypes.string,
   /** @prop Optional header node to replace header element | ''  */
   headerNode: PropTypes.node,
   /** @prop Optional string to be used for Section Title | ''  */
@@ -62,6 +72,7 @@ SidebarNav.propTypes = {
 SidebarNav.defaultProps = {
   children: null,
   className: '',
+  focusQuery: '',
   headerNode: null,
   title: ''
 };

diff --git a/react/src/lib/SidebarNav/tests/__snapshots__/index.spec.js.snap b/react/src/lib/SidebarNav/tests/__snapshots__/index.spec.js.snap
@@ -5,6 +5,7 @@ ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <SidebarNav
     className=""
+    focusQuery=""
     headerNode={null}
     navSectionTitle="Overview"
     title=""
@@ -37,6 +38,13 @@ ShallowWrapper {
             active={null}
             className="md-sidebar-nav__group md-sidebar-nav__group--primary"
             focusFirst={true}
+            focusFirstQuery=""
+            focusQuery="
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              "
             id={null}
             itemRole="listitem"
             navSectionTitle="Overview"
@@ -65,6 +73,13 @@ ShallowWrapper {
             active={null}
             className="md-sidebar-nav__group md-sidebar-nav__group--primary"
             focusFirst={true}
+            focusFirstQuery=""
+            focusQuery="
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              "
             id={null}
             itemRole="listitem"
             navSectionTitle="Overview"
@@ -94,6 +109,13 @@ ShallowWrapper {
               active={null}
               className="md-sidebar-nav__group md-sidebar-nav__group--primary"
               focusFirst={true}
+              focusFirstQuery=""
+              focusQuery="
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              "
               id={null}
               itemRole="listitem"
               navSectionTitle="Overview"
@@ -121,6 +143,13 @@ ShallowWrapper {
               "children": null,
               "className": "md-sidebar-nav__group md-sidebar-nav__group--primary",
               "focusFirst": true,
+              "focusFirstQuery": "",
+              "focusQuery": "
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              ",
               "id": null,
               "itemRole": "listitem",
               "navSectionTitle": "Overview",
@@ -181,6 +210,13 @@ ShallowWrapper {
               active={null}
               className="md-sidebar-nav__group md-sidebar-nav__group--primary"
               focusFirst={true}
+              focusFirstQuery=""
+              focusQuery="
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              "
               id={null}
               itemRole="listitem"
               navSectionTitle="Overview"
@@ -209,6 +245,13 @@ ShallowWrapper {
               active={null}
               className="md-sidebar-nav__group md-sidebar-nav__group--primary"
               focusFirst={true}
+              focusFirstQuery=""
+              focusQuery="
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              "
               id={null}
               itemRole="listitem"
               navSectionTitle="Overview"
@@ -238,6 +281,13 @@ ShallowWrapper {
                 active={null}
                 className="md-sidebar-nav__group md-sidebar-nav__group--primary"
                 focusFirst={true}
+                focusFirstQuery=""
+                focusQuery="
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              "
                 id={null}
                 itemRole="listitem"
                 navSectionTitle="Overview"
@@ -265,6 +315,13 @@ ShallowWrapper {
                 "children": null,
                 "className": "md-sidebar-nav__group md-sidebar-nav__group--primary",
                 "focusFirst": true,
+                "focusFirstQuery": "",
+                "focusQuery": "
+                .md-sidebar-nav__group--primary > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only),
+                .md-sidebar-nav__group--secondary.md-sidebar-nav__group--expanded > .md-sidebar-nav__group--expanded > .md-list-item:not(.disabled):not(:disabled):not(.md-list-item--read-only)
+                
+              ",
                 "id": null,
                 "itemRole": "listitem",
                 "navSectionTitle": "Overview",

diff --git a/react/src/lib/SidebarNavItem/index.js b/react/src/lib/SidebarNavItem/index.js
@@ -61,6 +61,7 @@ class SidebarNavItem extends React.Component {
       className,
       level,
       icon,
+      keyboardKey,
       title,
       titleNode,
       ...props
@@ -95,6 +96,7 @@ class SidebarNavItem extends React.Component {
           <ListItem
             className={className}
             id={id}
+            keyboardKey={keyboardKey || title}
             onClick={() => {children ? this.handleNavToggle() : false;}}
             {...otherProps}
           >
@@ -174,6 +176,8 @@ SidebarNavItem.propTypes = {
   expanded: PropTypes.bool,
   /** @prop Icon string or node for the title | null */
   icon: PropTypes.node,
+  /** @prop Unique string used for keyboard navigation | '' */
+  keyboardKey: PropTypes.string,
   // Internal Context Use Only
   level: PropTypes.string,
   // Internal Context Use Only
@@ -194,6 +198,7 @@ SidebarNavItem.defaultProps = {
   children: null,
   expanded: false,
   icon: null,
+  keyboardKey: '',
   level: null,
   primary: false,
   secondary: false,

diff --git a/react/src/lib/TopbarNav/tests/__snapshots__/index.spec.js.snap b/react/src/lib/TopbarNav/tests/__snapshots__/index.spec.js.snap
@@ -25,6 +25,8 @@ ShallowWrapper {
         active={null}
         className=""
         focusFirst={true}
+        focusFirstQuery=""
+        focusQuery=""
         id={null}
         itemRole="listitem"
         onSelect={null}
@@ -48,6 +50,8 @@ ShallowWrapper {
         "children": null,
         "className": "",
         "focusFirst": true,
+        "focusFirstQuery": "",
+        "focusQuery": "",
         "id": null,
         "itemRole": "listitem",
         "onSelect": null,
@@ -75,6 +79,8 @@ ShallowWrapper {
           active={null}
           className=""
           focusFirst={true}
+          focusFirstQuery=""
+          focusQuery=""
           id={null}
           itemRole="listitem"
           onSelect={null}
@@ -98,6 +104,8 @@ ShallowWrapper {
           "children": null,
           "className": "",
           "focusFirst": true,
+          "focusFirstQuery": "",
+          "focusQuery": "",
           "id": null,
           "itemRole": "listitem",
           "onSelect": null,