+ 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,
+ /**
+ * 
+ * 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
+`;
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"
}