From 5a1e7738bf2515467fbd122f4ea6b7380153e2fd Mon Sep 17 00:00:00 2001 From: SM051274 Date: Tue, 17 Oct 2023 16:39:21 +0530 Subject: [PATCH 1/7] initial commit --- .../terra-dev-site/doc/list/example/ListItem.jsx | 2 +- .../doc/list/guides/SingleSelectList.jsx | 2 +- packages/terra-list/src/List.jsx | 15 +++++++++++++-- packages/terra-list/src/ListItem.jsx | 7 ++++++- packages/terra-list/tests/jest/List.test.jsx | 12 ++++++++++++ .../__snapshots__/DraggableList.test.jsx.snap | 14 +++++++++++--- 6 files changed, 44 insertions(+), 8 deletions(-) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx index 08a406adcce..852fb1b996d 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx @@ -7,7 +7,7 @@ import styles from './ListDocCommon.module.scss'; const cx = classNames.bind(styles); const ListSectionExample = () => ( - + 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..7e7bca874f7 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 @@ -42,7 +42,7 @@ class SingleSelectList extends React.Component { render() { return ( - + {this.createListItems(mockData)} ); diff --git a/packages/terra-list/src/List.jsx b/packages/terra-list/src/List.jsx index 2821101d3e6..fa4862d5c1e 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 = ({ @@ -234,11 +240,16 @@ 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
    - {children} + {clone(children)}
); diff --git a/packages/terra-list/src/ListItem.jsx b/packages/terra-list/src/ListItem.jsx index ad01179c0ab..ffb697a8df9 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/packages/terra-list/src/ListItem.jsx @@ -59,6 +59,11 @@ const propTypes = { * @private Callback function not intended for use with this API, but if set pass it through to the element regardless. */ onMouseDown: PropTypes.func, + /** + * @private + * 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, /** * @private * The intl object to be injected for translations. @@ -108,7 +113,7 @@ const ListItem = ({ if (isSelectable) { attrSpread.onClick = ListUtils.wrappedOnClickForItem(onClick, onSelect, metaData); attrSpread.onKeyDown = ListUtils.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData); - attrSpread.tabIndex = '0'; + attrSpread.tabIndex = (isTabFocusDisabled) ? '-1' : '0'; attrSpread.role = 'option'; attrSpread['aria-selected'] = isSelected; attrSpread['data-item-show-focus'] = 'true'; diff --git a/packages/terra-list/tests/jest/List.test.jsx b/packages/terra-list/tests/jest/List.test.jsx index fded44b5a3a..03e0c2544b7 100644 --- a/packages/terra-list/tests/jest/List.test.jsx +++ b/packages/terra-list/tests/jest/List.test.jsx @@ -168,6 +168,18 @@ it('should render with single select aria attributes with ariaSelectionStyle sin expect(shallowComponent).toMatchSnapshot(); }); +it('should render selectable list with tabIndex -1 ', () => { + const mockCallBack = jest.fn(); + const item1 = ; + const item2 = ; + const items = [item1, item2]; + const shallowComponent = shallowWithIntl( + {items}, + ).dive(); + // expect(shallowComponent); + expect(shallowComponent).toMatchSnapshot(); +}); + it('should render with mutli select aria attributes with ariaSelectionStyle mutli-select', () => { const item1 = ; const item2 = ; diff --git a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap index e7a509b0f3c..9704876844d 100644 --- a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap @@ -62,6 +62,7 @@ exports[`should render List with items 1`] = ` } } isDraggable={true} + isTabFocusDisabled={false} paddingStyle="none" role="none" > @@ -219,6 +220,7 @@ exports[`should render List with items 1`] = ` draggable={false} isDraggable={true} isSelectable={true} + isTabFocusDisabled={false} key="1" onDragStart={[Function]} onTransitionEnd={null} @@ -270,6 +272,7 @@ exports[`should render List with items 1`] = ` isDraggable={true} isSelectable={true} isSelected={false} + isTabFocusDisabled={false} onDragStart={[Function]} onTransitionEnd={null} refCallback={[Function]} @@ -467,6 +470,7 @@ exports[`should render List with items 1`] = ` draggable={false} isDraggable={true} isSelectable={true} + isTabFocusDisabled={false} key="2" onDragStart={[Function]} onTransitionEnd={null} @@ -518,6 +522,7 @@ exports[`should render List with items 1`] = ` isDraggable={true} isSelectable={true} isSelected={false} + isTabFocusDisabled={false} onDragStart={[Function]} onTransitionEnd={null} refCallback={[Function]} @@ -674,15 +679,18 @@ exports[`should render List without Draggable items 1`] = ` > `; From a785574fca649dc9c7c86042ca9c0d6a4dd9a51b Mon Sep 17 00:00:00 2001 From: SM051274 Date: Tue, 17 Oct 2023 23:38:03 +0530 Subject: [PATCH 2/7] Added new prop to disable tab focus for list items --- packages/terra-list/src/List.jsx | 32 +++-- packages/terra-list/src/ListItem.jsx | 7 +- packages/terra-list/tests/jest/List.test.jsx | 12 -- .../terra-list/tests/jest/ListItem.test.jsx | 12 ++ .../__snapshots__/DraggableList.test.jsx.snap | 2 + .../jest/__snapshots__/List.test.jsx.snap | 136 ++++++++++++------ .../jest/__snapshots__/ListItem.test.jsx.snap | 21 +++ 7 files changed, 144 insertions(+), 78 deletions(-) diff --git a/packages/terra-list/src/List.jsx b/packages/terra-list/src/List.jsx index fa4862d5c1e..cbd3eee1762 100644 --- a/packages/terra-list/src/List.jsx +++ b/packages/terra-list/src/List.jsx @@ -106,21 +106,23 @@ const defaultProps = { role: 'none', }; -const List = ({ - ariaDescribedBy, - ariaDescription, - ariaDetails, - children, - intl, - dividerStyle, - paddingStyle, - refCallback, - role, - ariaSelectionStyle, - isDraggable, - onDragEnd, - ...customProps -}) => { +const List = (props) => { + const { + ariaDescribedBy, + ariaDescription, + ariaDetails, + children, + intl, + dividerStyle, + paddingStyle, + refCallback, + role, + ariaSelectionStyle, + isDraggable, + isTabFocusDisabled, + onDragEnd, + ...customProps + } = props; const theme = useContext(ThemeContext); const [listItem, setlistItem] = useState([]); let listNode = useRef(); diff --git a/packages/terra-list/src/ListItem.jsx b/packages/terra-list/src/ListItem.jsx index ffb697a8df9..55a9f1ffd6b 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/packages/terra-list/src/ListItem.jsx @@ -59,11 +59,6 @@ const propTypes = { * @private Callback function not intended for use with this API, but if set pass it through to the element regardless. */ onMouseDown: PropTypes.func, - /** - * @private - * 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, /** * @private * The intl object to be injected for translations. @@ -104,7 +99,7 @@ const ListItem = ({ ), customProps.className, ); - const { isDraggable } = customProps; + const { isDraggable, isTabFocusDisabled } = customProps; const attrSpread = {}; const onFocusResponse = intl.formatMessage({ id: 'Terra.list.focus' }); diff --git a/packages/terra-list/tests/jest/List.test.jsx b/packages/terra-list/tests/jest/List.test.jsx index 03e0c2544b7..fded44b5a3a 100644 --- a/packages/terra-list/tests/jest/List.test.jsx +++ b/packages/terra-list/tests/jest/List.test.jsx @@ -168,18 +168,6 @@ it('should render with single select aria attributes with ariaSelectionStyle sin expect(shallowComponent).toMatchSnapshot(); }); -it('should render selectable list with tabIndex -1 ', () => { - const mockCallBack = jest.fn(); - const item1 = ; - const item2 = ; - const items = [item1, item2]; - const shallowComponent = shallowWithIntl( - {items}, - ).dive(); - // expect(shallowComponent); - expect(shallowComponent).toMatchSnapshot(); -}); - it('should render with mutli select aria attributes with ariaSelectionStyle mutli-select', () => { const item1 = ; const item2 = ; diff --git a/packages/terra-list/tests/jest/ListItem.test.jsx b/packages/terra-list/tests/jest/ListItem.test.jsx index 3468356e116..ad71ea05a61 100644 --- a/packages/terra-list/tests/jest/ListItem.test.jsx +++ b/packages/terra-list/tests/jest/ListItem.test.jsx @@ -43,6 +43,18 @@ it('should render with callback functions', () => { expect(mockCallBack.mock.calls.length).toEqual(3); }); +it('should render with tabindex -1 when isTabFocusDisabled is set to true', () => { + const mockCallBack = jest.fn(); + + const shallowComponent = shallowWithIntl( + , + ).dive(); + + expect(shallowComponent.prop('tabIndex')).toContain('-1'); + // expect(shallowComponent.find('li').getAttribute('tabindex')).toEqual(-1); + expect(shallowComponent).toMatchSnapshot(); +}); + it('correctly applies the theme context className', () => { const wrapper = mountWithIntl( diff --git a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap index 9704876844d..37c5a945c8f 100644 --- a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap @@ -296,6 +296,7 @@ exports[`should render List with items 1`] = ` data-rbd-draggable-id="1" draggable={false} isDraggable={true} + isTabFocusDisabled={false} onBlur={[Function]} onDragStart={[Function]} onMouseDown={[Function]} @@ -546,6 +547,7 @@ exports[`should render List with items 1`] = ` data-rbd-draggable-id="2" draggable={false} isDraggable={true} + isTabFocusDisabled={false} 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..950cedcad15 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,24 @@ exports[`should render with selected 1`] = ` /> `; + +exports[`should render with tabindex -1 when isTabFocusDisabled is set to true 1`] = ` +
  • +
    +
    • +`; From 08edadebfc77a1399e2cfdb8e2e7898c52031962 Mon Sep 17 00:00:00 2001 From: SM051274 Date: Tue, 17 Oct 2023 23:54:37 +0530 Subject: [PATCH 3/7] clean up --- packages/terra-list/src/List.jsx | 33 +++++++++---------- .../terra-list/tests/jest/ListItem.test.jsx | 1 - 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/terra-list/src/List.jsx b/packages/terra-list/src/List.jsx index cbd3eee1762..9c7a2d5a66c 100644 --- a/packages/terra-list/src/List.jsx +++ b/packages/terra-list/src/List.jsx @@ -106,23 +106,22 @@ const defaultProps = { role: 'none', }; -const List = (props) => { - const { - ariaDescribedBy, - ariaDescription, - ariaDetails, - children, - intl, - dividerStyle, - paddingStyle, - refCallback, - role, - ariaSelectionStyle, - isDraggable, - isTabFocusDisabled, - onDragEnd, - ...customProps - } = props; +const List = ({ + ariaDescribedBy, + ariaDescription, + ariaDetails, + children, + intl, + dividerStyle, + paddingStyle, + refCallback, + role, + ariaSelectionStyle, + isDraggable, + isTabFocusDisabled, + onDragEnd, + ...customProps +}) => { const theme = useContext(ThemeContext); const [listItem, setlistItem] = useState([]); let listNode = useRef(); diff --git a/packages/terra-list/tests/jest/ListItem.test.jsx b/packages/terra-list/tests/jest/ListItem.test.jsx index ad71ea05a61..50e6bbb77ba 100644 --- a/packages/terra-list/tests/jest/ListItem.test.jsx +++ b/packages/terra-list/tests/jest/ListItem.test.jsx @@ -51,7 +51,6 @@ it('should render with tabindex -1 when isTabFocusDisabled is set to true', () = ).dive(); expect(shallowComponent.prop('tabIndex')).toContain('-1'); - // expect(shallowComponent.find('li').getAttribute('tabindex')).toEqual(-1); expect(shallowComponent).toMatchSnapshot(); }); From 51d9c9dc00976659ea7ee872ea43bf0f1357e5f8 Mon Sep 17 00:00:00 2001 From: SM051274 Date: Wed, 18 Oct 2023 12:35:01 +0530 Subject: [PATCH 4/7] change log entries --- packages/terra-core-docs/CHANGELOG.md | 3 + .../doc/list/example/ListItem.jsx | 60 +++++++++++-------- packages/terra-list/CHANGELOG.md | 3 + 3 files changed, 40 insertions(+), 26 deletions(-) diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 674d2240f1c..2e97204ee9e 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Updated + * Updated `terra-list` examples to include `isTabFocusDisabled` prop. + ## 1.45.0 - (October 16, 2023) * Added diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx index 852fb1b996d..46b718984c5 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx @@ -7,32 +7,40 @@ import styles from './ListDocCommon.module.scss'; const cx = classNames.bind(styles); const ListSectionExample = () => ( - - - - - - - - - - - - - - + <> +

    + Note + {' '} + Tab key Navigation is disabled for below list items + {' '} +

    + + + + + + + + + + + + + + + ); export default ListSectionExample; diff --git a/packages/terra-list/CHANGELOG.md b/packages/terra-list/CHANGELOG.md index 9da6fc86bb6..66815b7218c 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. + ## 4.65.0 - (October 16, 2023) * Changed From f2f3bb126b12dcea9d03e36dc48acc8363425567 Mon Sep 17 00:00:00 2001 From: SM051274 Date: Wed, 18 Oct 2023 14:36:50 +0530 Subject: [PATCH 5/7] Removing form mode text for terra-list --- packages/terra-list/translations/de.json | 2 +- packages/terra-list/translations/en-GB.json | 2 +- packages/terra-list/translations/en.json | 2 +- packages/terra-list/translations/es.json | 2 +- packages/terra-list/translations/fr.json | 2 +- packages/terra-list/translations/nl.json | 2 +- packages/terra-list/translations/pt.json | 2 +- packages/terra-list/translations/sv.json | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) 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" } From 69282c57b676db12336116fba12fc21dff98983c Mon Sep 17 00:00:00 2001 From: SM051274 Date: Thu, 19 Oct 2023 19:49:58 +0530 Subject: [PATCH 6/7] added examples for programmatic focus --- .../doc/list/example/ListItem.jsx | 60 ++++++++----------- .../doc/list/guides/SingleSelectList.jsx | 31 ++++++++-- packages/terra-list/src/List.jsx | 5 +- packages/terra-list/src/ListItem.jsx | 5 ++ 4 files changed, 60 insertions(+), 41 deletions(-) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx index 46b718984c5..08a406adcce 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/ListItem.jsx @@ -7,40 +7,32 @@ import styles from './ListDocCommon.module.scss'; const cx = classNames.bind(styles); const ListSectionExample = () => ( - <> -

    - Note - {' '} - Tab key Navigation is disabled for below list items - {' '} -

    - - - - - - - - - - - - - - - + + + + + + + + + + + + + + ); export default ListSectionExample; 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 7e7bca874f7..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/src/List.jsx b/packages/terra-list/src/List.jsx index c78a6c8156c..d3c492ca49c 100644 --- a/packages/terra-list/src/List.jsx +++ b/packages/terra-list/src/List.jsx @@ -280,13 +280,14 @@ const List = ({ )} > {(provided) => ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props + /* eslint-disable jsx-a11y/aria-props */ + /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props */
      { diff --git a/packages/terra-list/src/ListItem.jsx b/packages/terra-list/src/ListItem.jsx index 55a9f1ffd6b..443dde2e2a4 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/packages/terra-list/src/ListItem.jsx @@ -1,3 +1,4 @@ +/* eslint-disable no-param-reassign */ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -100,6 +101,7 @@ const ListItem = ({ customProps.className, ); const { isDraggable, isTabFocusDisabled } = customProps; + const attrSpread = {}; const onFocusResponse = intl.formatMessage({ id: 'Terra.list.focus' }); @@ -119,6 +121,9 @@ const ListItem = ({ attrSpread['aria-describedby'] = responseId; } + delete customProps?.isTabFocusDisabled; + delete customProps?.isDraggable; + return (
    • {(isDraggable) && ( From 7671ac56cb11147528fa9484e7f3876ceb4f1c9f Mon Sep 17 00:00:00 2001 From: SM051274 Date: Fri, 20 Oct 2023 14:31:54 +0530 Subject: [PATCH 7/7] removes custom prop to prevent warning --- packages/terra-list/src/List.jsx | 5 +++-- .../tests/jest/__snapshots__/DraggableList.test.jsx.snap | 9 --------- .../tests/jest/__snapshots__/ListItem.test.jsx.snap | 1 - 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/terra-list/src/List.jsx b/packages/terra-list/src/List.jsx index d3c492ca49c..273378d1665 100644 --- a/packages/terra-list/src/List.jsx +++ b/packages/terra-list/src/List.jsx @@ -261,7 +261,8 @@ const List = ({ {...customProps} {...attrSpread} 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} className={listClassNames} ref={handleListRef} @@ -280,13 +281,13 @@ const List = ({ )} > {(provided) => ( - /* eslint-disable jsx-a11y/aria-props */ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/role-supports-aria-props */