diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 4e49c0ec69e..c3e261424d8 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Updated + * Updated `terra-list` examples to include `isTabFocusDisabled` prop. * Removed `terra-table` as a dependency as the docs have now moved to `terra-framework-docs`. ## 1.45.0 - (October 16, 2023) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/list/guides/SingleSelectList.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/list/guides/SingleSelectList.jsx index cb758eb9814..92733e4c2a7 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/list/guides/SingleSelectList.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/list/guides/SingleSelectList.jsx @@ -12,6 +12,8 @@ class SingleSelectList extends React.Component { super(props); this.createListItem = this.createListItem.bind(this); this.handleItemSelection = this.handleItemSelection.bind(this); + this.handleOnClick = this.handleOnClick.bind(this); + this.setListNode = this.setListNode.bind(this); this.state = { selectedKey: null }; } @@ -22,7 +24,16 @@ class SingleSelectList extends React.Component { } } - createListItem(itemData) { + handleOnClick() { + this.firstListItem.focus(); + } + + setListNode(element) { + this.firstListItem = element; + } + + createListItem(itemData, index) { + const listItemRef = (index === 0) ? this.setListNode : null; return ( @@ -37,14 +49,23 @@ class SingleSelectList extends React.Component { } createListItems(data) { - return data.map(childItem => this.createListItem(childItem)); + return data.map((childItem, index) => this.createListItem(childItem, index)); } render() { return ( - - {this.createListItems(mockData)} - +
+

+ Note + {' '} + Tab key Navigation is disabled for below list items. Inorder to interact with list-item user should set programmatic focus to one of the list item depending on the required scenario. + {' '} +

+ + + {this.createListItems(mockData)} + +
); } } diff --git a/packages/terra-list/CHANGELOG.md b/packages/terra-list/CHANGELOG.md index 7cafbe3100c..381a572b6a3 100644 --- a/packages/terra-list/CHANGELOG.md +++ b/packages/terra-list/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added `isTabFocusDisabled` prop to disable tab key navigation. + * Fixed * Fixed _property is undefined_ error while navigating with a keyboard. diff --git a/packages/terra-list/src/List.jsx b/packages/terra-list/src/List.jsx index d833a0c71e8..273378d1665 100644 --- a/packages/terra-list/src/List.jsx +++ b/packages/terra-list/src/List.jsx @@ -84,6 +84,11 @@ const propTypes = { * Whether or not the list item is draggable. List Item is draggable only when it is selectable. */ isDraggable: PropTypes.bool, + /** + * ![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: * @param {Object} result result @@ -93,11 +98,12 @@ const propTypes = { }; const defaultProps = { + ariaSelectionStyle: 'none', children: [], dividerStyle: 'none', + isTabFocusDisabled: false, paddingStyle: 'none', role: 'none', - ariaSelectionStyle: 'none', }; const List = ({ @@ -112,6 +118,7 @@ const List = ({ role, ariaSelectionStyle, isDraggable, + isTabFocusDisabled, onDragEnd, ...customProps }) => { @@ -238,24 +245,30 @@ const List = ({ const cloneListItem = (ListItem, provider) => React.cloneElement(ListItem, { isDraggable: ListItem?.props?.isSelectable, + isTabFocusDisabled, refCallback: provider.innerRef, ...provider.draggableProps, ...provider.dragHandleProps, }); + const clone = (object) => React.Children.map(object, (listitem) => React.cloneElement(listitem, { + isTabFocusDisabled, + })); + const renderListDom = () => ( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props ); @@ -268,13 +281,14 @@ const List = ({ )} > {(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 */ `; @@ -1005,7 +1011,6 @@ exports[`should render Section with items 1`] = ` data-rbd-draggable-context-id="1" data-rbd-draggable-id="123" draggable={false} - isDraggable={true} onBlur={[Function]} onDragStart={[Function]} onMouseDown={[Function]} @@ -1253,7 +1258,6 @@ exports[`should render Section with items 1`] = ` data-rbd-draggable-context-id="1" data-rbd-draggable-id="124" draggable={false} - isDraggable={true} onBlur={[Function]} onDragStart={[Function]} onMouseDown={[Function]} @@ -1699,7 +1703,6 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-context-id="2" data-rbd-draggable-id="13" draggable={false} - isDraggable={true} onBlur={[Function]} onDragStart={[Function]} onMouseDown={[Function]} @@ -1947,7 +1950,6 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-context-id="2" data-rbd-draggable-id="14" draggable={false} - isDraggable={true} onBlur={[Function]} onDragStart={[Function]} onMouseDown={[Function]} @@ -2195,7 +2197,6 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-context-id="2" data-rbd-draggable-id="15" draggable={false} - isDraggable={true} onBlur={[Function]} onDragStart={[Function]} onMouseDown={[Function]} diff --git a/packages/terra-list/tests/jest/__snapshots__/List.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/List.test.jsx.snap index 629fbc67cd3..9492845f2a7 100644 --- a/packages/terra-list/tests/jest/__snapshots__/List.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/List.test.jsx.snap @@ -66,6 +66,7 @@ exports[`correctly applies the theme context className 1`] = ` "timeZone": null, } } + isTabFocusDisabled={false} paddingStyle="none" role="none" > @@ -201,19 +202,24 @@ exports[`should render with ariaDescription 1`] = ` role="list" > `; @@ -226,19 +232,24 @@ exports[`should render with ariaDescription 2`] = ` role="list" > `; @@ -364,19 +375,24 @@ exports[`should render with bottom only divided items 1`] = ` role="list" > `; @@ -388,19 +404,24 @@ exports[`should render with items 1`] = ` role="list" > `; @@ -414,19 +435,24 @@ exports[`should render with mutli select aria attributes with ariaSelectionStyle role="listbox" > `; @@ -447,19 +473,24 @@ exports[`should render with single select aria attributes with ariaSelectionStyl role="listbox" > `; @@ -471,19 +502,24 @@ exports[`should render with standard divided items 1`] = ` role="list" > `; @@ -495,19 +531,24 @@ exports[`should render with standard padded items 1`] = ` role="list" > `; @@ -519,19 +560,24 @@ exports[`should render with thin padded items 1`] = ` role="list" > `; diff --git a/packages/terra-list/tests/jest/__snapshots__/ListItem.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/ListItem.test.jsx.snap index 2ef79f2ab1c..fec5fda5ee6 100644 --- a/packages/terra-list/tests/jest/__snapshots__/ListItem.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/ListItem.test.jsx.snap @@ -187,3 +187,23 @@ exports[`should render with selected 1`] = ` /> `; + +exports[`should render with tabindex -1 when isTabFocusDisabled is set to true 1`] = ` +
  • +
    +
  • +`; diff --git a/packages/terra-list/translations/de.json b/packages/terra-list/translations/de.json index e2af5e783ff..0d51ebdbbb9 100644 --- a/packages/terra-list/translations/de.json +++ b/packages/terra-list/translations/de.json @@ -5,5 +5,5 @@ "Terra.list.drag": "Sie haben das Element von Position {startPosition} nach Position {endPosition} verschoben.", "Terra.list.cancelDrag": "Verschiebung abgebrochen. Das Element wurde zurück an seine Ausgangsposition {startPosition} verschoben.", "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" } diff --git a/packages/terra-list/translations/en-GB.json b/packages/terra-list/translations/en-GB.json index 08426520eab..4d6c1ad9378 100644 --- a/packages/terra-list/translations/en-GB.json +++ b/packages/terra-list/translations/en-GB.json @@ -5,5 +5,5 @@ "Terra.list.drag": "You have moved the item from position {startPosition} to position {endPosition}", "Terra.list.cancelDrag": "Movement cancelled. The item has returned to its starting position of {startPosition}", "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" } diff --git a/packages/terra-list/translations/en.json b/packages/terra-list/translations/en.json index 08426520eab..4d6c1ad9378 100644 --- a/packages/terra-list/translations/en.json +++ b/packages/terra-list/translations/en.json @@ -5,5 +5,5 @@ "Terra.list.drag": "You have moved the item from position {startPosition} to position {endPosition}", "Terra.list.cancelDrag": "Movement cancelled. The item has returned to its starting position of {startPosition}", "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" } diff --git a/packages/terra-list/translations/es.json b/packages/terra-list/translations/es.json index 6baeebff0e6..b7a81dc2f2c 100644 --- a/packages/terra-list/translations/es.json +++ b/packages/terra-list/translations/es.json @@ -5,5 +5,5 @@ "Terra.list.drag": "Ha movido el elemento de la posición {startPosition} a la posición {endPosition}", "Terra.list.cancelDrag": "Se canceló el movimiento. El elemento ha vuelto a su posición inicial {startPosition}", "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" } diff --git a/packages/terra-list/translations/fr.json b/packages/terra-list/translations/fr.json index 64749272ac8..11c84211e35 100644 --- a/packages/terra-list/translations/fr.json +++ b/packages/terra-list/translations/fr.json @@ -5,5 +5,5 @@ "Terra.list.drag": "Vous avez déplacé l'élément de la position {startPosition} à {endPosition}.", "Terra.list.cancelDrag": "Déplacement annulé. L'élément est revenu à sa position initiale {startPosition}.", "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" } diff --git a/packages/terra-list/translations/nl.json b/packages/terra-list/translations/nl.json index 0269dce25cb..192fa534a64 100644 --- a/packages/terra-list/translations/nl.json +++ b/packages/terra-list/translations/nl.json @@ -5,5 +5,5 @@ "Terra.list.drag": "U heeft het item van positie {startPosition} naar positie {endPosition} verplaatst", "Terra.list.cancelDrag": "Verplaatsing geannuleerd. Het item is teruggezet naar startpositie {startPosition}.", "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" } diff --git a/packages/terra-list/translations/pt.json b/packages/terra-list/translations/pt.json index e2ea36b0650..c139f3eea7f 100644 --- a/packages/terra-list/translations/pt.json +++ b/packages/terra-list/translations/pt.json @@ -5,5 +5,5 @@ "Terra.list.drag": "Você moveu o item da posição {startPosition} para a posição {endPosition}", "Terra.list.cancelDrag": "Movimento cancelado. O item retornou para sua posição inicial de {startPosition}", "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" } diff --git a/packages/terra-list/translations/sv.json b/packages/terra-list/translations/sv.json index 769d2b343ac..60c9235d91c 100644 --- a/packages/terra-list/translations/sv.json +++ b/packages/terra-list/translations/sv.json @@ -5,5 +5,5 @@ "Terra.list.drag": "Du har flyttat objektet från plats {startPosition} till plats {endPosition}", "Terra.list.cancelDrag": "Förflyttningen avbröts. Objektet har återgått till startplats {startPosition}", "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" }