terra-list - npm Package Compare versions

Comparing version 4.65.0 to 4.66.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## 4.66.0 - (October 23, 2023)
+
+* Added
+  * Added `isTabFocusDisabled` prop to disable tab key navigation.
+
+* Fixed
+  * Fixed _property is undefined_ error while navigating with a keyboard.
+
 ## 4.65.0 - (October 16, 2023)
@@ -7,0 +15,0 @@

lib/List.js

@@ -17,3 +17,3 @@ "use strict";
 var _ListModule = _interopRequireDefault(require("./List.module.scss"));
-var _excluded = ["ariaDescribedBy", "ariaDescription", "ariaDetails", "children", "intl", "dividerStyle", "paddingStyle", "refCallback", "role", "ariaSelectionStyle", "isDraggable", "onDragEnd"];
+var _excluded = ["ariaDescribedBy", "ariaDescription", "ariaDetails", "children", "intl", "dividerStyle", "paddingStyle", "refCallback", "role", "ariaSelectionStyle", "isDraggable", "isTabFocusDisabled", "onDragEnd"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -112,2 +112,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
   /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Whether or not the list item is focusable with Tab key. Ensure alternative way of focusing list item when set to true for best accessibility experience.
+   */
+  isTabFocusDisabled: _propTypes.default.bool,
+  /**
    * Function callback when the Item is dropped. Parameters:
@@ -120,7 +125,8 @@ * @param {Object} result result
 var defaultProps = {
+  ariaSelectionStyle: 'none',
   children: [],
   dividerStyle: 'none',
+  isTabFocusDisabled: false,
   paddingStyle: 'none',
-  role: 'none',
-  ariaSelectionStyle: 'none'
+  role: 'none'
 };
@@ -139,2 +145,3 @@ var List = function List(_ref) {
     isDraggable = _ref.isDraggable,
+    isTabFocusDisabled = _ref.isTabFocusDisabled,
     onDragEnd = _ref.onDragEnd,
@@ -187,3 +194,5 @@ customProps = _objectWithoutProperties(_ref, _excluded);
           var previousIndex = currentIndex > 0 ? currentIndex - 1 : lastIndex;
-          listItems[previousIndex].focus();
+          if (listItems[previousIndex]) {
+            listItems[previousIndex].focus();
+          }
           break;
@@ -195,3 +204,5 @@ }
           var nextIndex = currentIndex < lastIndex ? currentIndex + 1 : 0;
-          listItems[nextIndex].focus();
+          if (listItems[nextIndex]) {
+            listItems[nextIndex].focus();
+          }
           break;
@@ -276,5 +287,13 @@ }
       isDraggable: ListItem === null || ListItem === void 0 || (_ListItem$props = ListItem.props) === null || _ListItem$props === void 0 ? void 0 : _ListItem$props.isSelectable,
+      isTabFocusDisabled: isTabFocusDisabled,
       refCallback: provider.innerRef
     }, provider.draggableProps), provider.dragHandleProps));
   };
+  var clone = function clone(object) {
+    return _react.default.Children.map(object, function (listitem) {
+      return /*#__PURE__*/_react.default.cloneElement(listitem, {
+        isTabFocusDisabled: isTabFocusDisabled
+      });
+    });
+  };
   var renderListDom = function renderListDom() {
@@ -285,5 +304,6 @@ return (
       _react.default.createElement("ul", _extends({}, customProps, attrSpread, {
-        "aria-describedby": ariaDescribedBy,
-        "aria-description": ariaDescription // eslint-disable-line jsx-a11y/aria-props
+        "aria-describedby": ariaDescribedBy
+        // eslint-disable-next-line jsx-a11y/aria-props
         ,
+        "aria-description": ariaDescription,
         "aria-details": ariaDetails,
@@ -293,3 +313,3 @@ className: listClassNames,
         onKeyDown: handleKeyDown
-      }), children)
+      }), clone(children))
     );
@@ -310,7 +330,8 @@ };
         /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props
+        /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props */
         _react.default.createElement("ul", _extends({}, provided.droppableProps, customProps, attrSpread, {
-          "aria-describedby": ariaDescribedBy,
-          "aria-description": ariaDescription // eslint-disable-line jsx-a11y/aria-props
+          "aria-describedby": ariaDescribedBy
+          // eslint-disable-next-line jsx-a11y/aria-props
           ,
+          "aria-description": ariaDescription,
           "aria-details": ariaDetails,
@@ -317,0 +338,0 @@ className: listClassNames,

lib/ListItem.js

@@ -19,2 +19,3 @@ "use strict";
 var _excluded = ["children", "hasChevron", "isSelected", "isSelectable", "metaData", "onBlur", "onClick", "onKeyDown", "onMouseDown", "onSelect", "refCallback", "intl"];
+/* eslint-disable no-param-reassign */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -106,3 +107,4 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   }, theme.className), customProps.className);
-  var isDraggable = customProps.isDraggable;
+  var isDraggable = customProps.isDraggable,
+    isTabFocusDisabled = customProps.isTabFocusDisabled;
   var attrSpread = {};
@@ -116,3 +118,3 @@ var onFocusResponse = intl.formatMessage({
     attrSpread.onKeyDown = _ListUtils.default.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData);
-    attrSpread.tabIndex = '0';
+    attrSpread.tabIndex = isTabFocusDisabled ? '-1' : '0';
     attrSpread.role = 'option';
@@ -131,2 +133,4 @@ attrSpread['aria-selected'] = isSelected;
   }
+  customProps === null || customProps === void 0 || delete customProps.isTabFocusDisabled;
+  customProps === null || customProps === void 0 || delete customProps.isDraggable;
   return /*#__PURE__*/_react.default.createElement("li", _extends({}, customProps, attrSpread, {
@@ -133,0 +137,0 @@ className: listItemClassNames,

package.json

 {
   "name": "terra-list",
   "main": "lib/index.js",
-  "version": "4.65.0",
+  "version": "4.66.0",
   "description": "The Terra List is a structural component to arrange content within list/listitems.",
@@ -53,3 +53,3 @@ "repository": {
   },
-  "gitHead": "ceabc03e855b802114d93f40b95594068b7c0503"
+  "gitHead": "7eadd8eda62721d33cfc1300091110ddb9051817"
 }

src/List.jsx

@@ -88,2 +88,7 @@ import React, {
   /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Whether or not the list item is focusable with Tab key. Ensure alternative way of focusing list item when set to true for best accessibility experience.
+   */
+  isTabFocusDisabled: PropTypes.bool,
+  /**
    * Function callback when the Item is dropped. Parameters:
@@ -97,7 +102,8 @@ * @param {Object} result result
 const defaultProps = {
+  ariaSelectionStyle: 'none',
   children: [],
   dividerStyle: 'none',
+  isTabFocusDisabled: false,
   paddingStyle: 'none',
   role: 'none',
-  ariaSelectionStyle: 'none',
 };
@@ -117,2 +123,3 @@
   isDraggable,
+  isTabFocusDisabled,
   onDragEnd,
@@ -168,3 +175,5 @@ ...customProps
         const previousIndex = currentIndex > 0 ? currentIndex - 1 : lastIndex;
-        listItems[previousIndex].focus();
+        if (listItems[previousIndex]) {
+          listItems[previousIndex].focus();
+        }
         break;
@@ -175,3 +184,5 @@ }
         const nextIndex = currentIndex < lastIndex ? currentIndex + 1 : 0;
-        listItems[nextIndex].focus();
+        if (listItems[nextIndex]) {
+          listItems[nextIndex].focus();
+        }
         break;
@@ -242,2 +253,3 @@ }
     isDraggable: ListItem?.props?.isSelectable,
+    isTabFocusDisabled,
     refCallback: provider.innerRef,
@@ -248,2 +260,6 @@ ...provider.draggableProps,
 
+  const clone = (object) => React.Children.map(object, (listitem) => React.cloneElement(listitem, {
+    isTabFocusDisabled,
+  }));
+
   const renderListDom = () => (
@@ -255,3 +271,4 @@ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props
       aria-describedby={ariaDescribedBy}
-      aria-description={ariaDescription} // eslint-disable-line jsx-a11y/aria-props
+       // eslint-disable-next-line jsx-a11y/aria-props
+      aria-description={ariaDescription}
       aria-details={ariaDetails}
@@ -262,3 +279,3 @@ className={listClassNames}
     >
-      {children}
+      {clone(children)}
     </ul>
@@ -276,3 +293,3 @@ );
         {(provided) => (
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props
+          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props */
           <ul
@@ -283,3 +300,4 @@ {...provided.droppableProps}
             aria-describedby={ariaDescribedBy}
-            aria-description={ariaDescription} // eslint-disable-line jsx-a11y/aria-props
+            // eslint-disable-next-line jsx-a11y/aria-props
+            aria-description={ariaDescription}
             aria-details={ariaDetails}
@@ -286,0 +304,0 @@ className={listClassNames}

src/ListItem.jsx

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import React from 'react';
@@ -102,3 +103,4 @@ import PropTypes from 'prop-types';
   );
-  const { isDraggable } = customProps;
+  const { isDraggable, isTabFocusDisabled } = customProps;
+
   const attrSpread = {};
@@ -112,3 +114,3 @@
     attrSpread.onKeyDown = ListUtils.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData);
-    attrSpread.tabIndex = '0';
+    attrSpread.tabIndex = (isTabFocusDisabled) ? '-1' : '0';
     attrSpread.role = 'option';
@@ -124,2 +126,5 @@ attrSpread['aria-selected'] = isSelected;
 
+  delete customProps?.isTabFocusDisabled;
+  delete customProps?.isDraggable;
+
   return (
@@ -126,0 +131,0 @@ <li {...customProps} {...attrSpread} className={listItemClassNames} ref={refCallback}>

tests/jest/ListItem.test.jsx

@@ -46,2 +46,13 @@ import React from 'react';
 
+it('should render with tabindex -1 when isTabFocusDisabled is set to true', () => {
+  const mockCallBack = jest.fn();
+
+  const shallowComponent = shallowWithIntl(
+    <ListItem title="test" isSelectable isTabFocusDisabled onSelect={mockCallBack} refCallback={jest.fn()} />,
+  ).dive();
+
+  expect(shallowComponent.prop('tabIndex')).toContain('-1');
+  expect(shallowComponent).toMatchSnapshot();
+});
+
 it('correctly applies the theme context className', () => {
@@ -48,0 +59,0 @@ const wrapper = mountWithIntl(

translations/de.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "Sie haben das Element abgelegt. Sie haben das Element von Position {startPosition} nach Position {endPosition} verschoben.",
-  "Terra.list.focus": "Leertaste drücken, um mit dem Ziehen zu beginnen. Beim Ziehen können Sie die Pfeiltasten verwenden, um das Element zu verschieben, und die Esc-Taste, um abzubrechen. Stellen Sie sicher, dass Ihre Sprachausgabe im Fokus- oder Formularmodus ist."
+  "Terra.list.focus": "Leertaste drücken, um mit dem Ziehen zu beginnen. Beim Ziehen können Sie die Pfeiltasten verwenden, um das Element zu verschieben, und die Esc-Taste, um abzubrechen"
 }

translations/en-GB.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "You have dropped the item. You have moved the item from position {startPosition} to {endPosition}",
-  "Terra.list.focus": "Press SPACE to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Ensure your screen reader is in focus mode or forms mode"
+  "Terra.list.focus": "Press SPACE to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel"
 }

translations/en.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "You have dropped the item. You have moved the item from position {startPosition} to {endPosition}",
-  "Terra.list.focus": "Press SPACE to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Ensure your screen reader is in focus mode or forms mode"
+  "Terra.list.focus": "Press SPACE to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel"
 }

translations/es.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "Ha soltado el elemento. Ha movido el elemento de la posición {startPosition} a {endPosition}",
-  "Terra.list.focus": "Presione la barra espaciadora para empezar a arrastrar. Se pueden usar las teclas de flecha para mover el elemento al arrastrar y la tecla Esc para cancelar. Asegúrese de que su lector de pantalla esté en el modo de enfoque o el modo formularios"
+  "Terra.list.focus": "Presione la barra espaciadora para empezar a arrastrar. Se pueden usar las teclas de flecha para mover el elemento al arrastrar y la tecla Esc para cancelar"
 }

translations/fr.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "Vous avez déposé l'élément. Vous avez déplacé l'élément de la position {startPosition} à {endPosition}.",
-  "Terra.list.focus": "Appuyez sur la barre d'espace pour faire glisser. Lorsque vous faites glisser un élément, vous pouvez utiliser les touches fléchées pour le déplacer et la touche Échappement pour annuler. Assurez-vous que votre lecteur d'écran est en mode Focus ou en mode Formulaires."
+  "Terra.list.focus": "Appuyez sur la barre d'espace pour faire glisser. Lorsque vous faites glisser un élément, vous pouvez utiliser les touches fléchées pour le déplacer et la touche Échappement pour annuler"
 }

translations/nl.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "U heeft het item neergezet. U heeft het item van positie {startPosition} naar {endPosition} verplaatst.",
-  "Terra.list.focus": "Druk op de spatiebalk om een sleepactie te starten. U kunt tijdens het slepen de pijltoetsen gebruiken om het item te verplaatsen. Druk op Escape om te annuleren. Zorg dat de schermlezer in de focus- of formulierenmodus is."
+  "Terra.list.focus": "Druk op de spatiebalk om een sleepactie te starten. U kunt tijdens het slepen de pijltoetsen gebruiken om het item te verplaatsen. Druk op Escape om te annuleren"
 }

translations/pt.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "Você desceu o item. Você moveu o item da posição {startPosition} para a posição {endPosition}",
-  "Terra.list.focus": "Pressione a barra de espaço para arrastar. Ao fazer a seleção, você pode usar as teclas de seta para mover o item ou Esc para cancelar a seleção. Certifique-se de que seu leitor de tela esteja no modo foco ou formas"
+  "Terra.list.focus": "Pressione a barra de espaço para arrastar. Ao fazer a seleção, você pode usar as teclas de seta para mover o item ou Esc para cancelar a seleção"
 }

translations/sv.json

@@ -8,3 +8,3 @@ {
   "Terra.list.drop": "Du har tappat objektet. Du har flyttat objektet från plats {startPosition} till plats {endPosition}",
-  "Terra.list.focus": "Börja dra genom att trycka på blankstegstangenten. När du drar kan du flytta objektet genom att använda piltangenterna och avbryta genom att trycka på Esc-tangenten. Se till att skärmläsaren är i fokusläge eller formulärläge"
+  "Terra.list.focus": "Börja dra genom att trycka på blankstegstangenten. När du drar kan du flytta objektet genom att använda piltangenterna och avbryta genom att trycka på Esc-tangenten"
 }

No alert changes

Improved metrics

Total package byte prevSize

219457

increased by0.89%

Lines of code

3309

increased by1.63%

No dependency changes