From f39d8b6b39068601dea05acb5d0de97d9dafd79c Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Tue, 20 Sep 2022 14:29:27 -0700 Subject: [PATCH] Improve experimental select control accessibility (#34510) * Use downshift built in methods to handle selection of items * Fix menu styling * Fix removal a11y announcement * Don't show menu without results * Fix async example a11y * Add changelog entry * Deselect item in state on remove * Fix formatting issues * Update lock file * Update lock file after pnpm7 * Skip lib check breaking oclif build in package-release * Rebase again and fix up lock file * Skip lib check in monorepo-merge * Fix the lock * Ignore lint Co-authored-by: Sam Seay Co-authored-by: Jonathan Sadowski --- .../fix-select-control-extensibility | 4 ++ .../src/experimental-select-control/menu.scss | 11 ++---- .../src/experimental-select-control/menu.tsx | 14 +++---- .../select-control.tsx | 39 +++++++++++++++---- .../stories/index.tsx | 4 ++ tools/monorepo-merge/tsconfig.json | 1 + tools/package-release/tsconfig.json | 1 + 7 files changed, 52 insertions(+), 22 deletions(-) create mode 100644 packages/js/components/changelog/fix-select-control-extensibility diff --git a/packages/js/components/changelog/fix-select-control-extensibility b/packages/js/components/changelog/fix-select-control-extensibility new file mode 100644 index 00000000000..40dee5ca1b0 --- /dev/null +++ b/packages/js/components/changelog/fix-select-control-extensibility @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Improve experimental SelectControl accessibility diff --git a/packages/js/components/src/experimental-select-control/menu.scss b/packages/js/components/src/experimental-select-control/menu.scss index 6e9e26af310..c1869524d42 100644 --- a/packages/js/components/src/experimental-select-control/menu.scss +++ b/packages/js/components/src/experimental-select-control/menu.scss @@ -4,14 +4,11 @@ top: 100%; box-sizing: border-box; display: none; + background: $studio-white; + border: 1px solid $studio-gray-5; + border-radius: 3px; - &.is-open { + &.is-open.has-results { display: block; } - - .woocommerce-experimental-select-control__menu-inner { - background: $studio-white; - border: 1px solid $studio-gray-5; - border-radius: 3px; - } } \ No newline at end of file diff --git a/packages/js/components/src/experimental-select-control/menu.tsx b/packages/js/components/src/experimental-select-control/menu.tsx index 44224a97a6c..df14c6cceb8 100644 --- a/packages/js/components/src/experimental-select-control/menu.tsx +++ b/packages/js/components/src/experimental-select-control/menu.tsx @@ -17,21 +17,19 @@ type MenuProps = { export const Menu = ( { children, getMenuProps, isOpen }: MenuProps ) => { return ( -
- { isOpen && - ( ! Array.isArray( children ) || !! children.length ) && ( -
    - { children } -
- ) } -
+ { isOpen && children } + ); }; diff --git a/packages/js/components/src/experimental-select-control/select-control.tsx b/packages/js/components/src/experimental-select-control/select-control.tsx index cec8e52f28f..9e6c4f79ab4 100644 --- a/packages/js/components/src/experimental-select-control/select-control.tsx +++ b/packages/js/components/src/experimental-select-control/select-control.tsx @@ -84,7 +84,14 @@ function SelectControl< ItemType = DefaultItemType >( { }: SelectControlProps< ItemType > ) { const [ isFocused, setIsFocused ] = useState( false ); const [ inputValue, setInputValue ] = useState( '' ); - const { getSelectedItemProps, getDropdownProps } = useMultipleSelection(); + const { + addSelectedItem, + getSelectedItemProps, + getDropdownProps, + removeSelectedItem, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + } = useMultipleSelection( { itemToString } ); let selectedItems = selected === null ? [] : selected; selectedItems = Array.isArray( selectedItems ) ? selectedItems @@ -104,11 +111,14 @@ function SelectControl< ItemType = DefaultItemType >( { getComboboxProps, highlightedIndex, getItemProps, - } = useCombobox( { + selectItem, + selectedItem: singleSelectedItem, + } = useCombobox< ItemType | null >( { inputValue, items: filteredItems, itemToString: getItemLabel, - selectedItem: null, + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore onStateChange: ( { inputValue: value, type, selectedItem } ) => { switch ( type ) { case useCombobox.stateChangeTypes.InputChange: @@ -121,9 +131,18 @@ function SelectControl< ItemType = DefaultItemType >( { case useCombobox.stateChangeTypes.InputBlur: if ( selectedItem ) { onSelect( selectedItem ); - setInputValue( - multiple ? '' : getItemLabel( selectedItem ) - ); + if ( multiple ) { + addSelectedItem( selectedItem ); + setInputValue( '' ); + break; + } + + selectItem( selectedItem ); + setInputValue( getItemLabel( selectedItem ) ); + } + + if ( ! selectedItem && ! multiple ) { + setInputValue( getItemLabel( singleSelectedItem ) ); } break; @@ -133,6 +152,12 @@ function SelectControl< ItemType = DefaultItemType >( { }, } ); + const onRemoveItem = ( item: ItemType ) => { + selectItem( null ); + removeSelectedItem( item ); + onRemove( item ); + }; + return (
( { getItemLabel={ getItemLabel } getItemValue={ getItemValue } getSelectedItemProps={ getSelectedItemProps } - onRemove={ onRemove } + onRemove={ onRemoveItem } /> ) } { const fetchItems = ( value: string | undefined ) => { setIsFetching( true ); + setFetchedItems( [] ); setTimeout( () => { const results = sampleItems.sort( () => 0.5 - Math.random() ); setFetchedItems( results ); @@ -117,6 +118,9 @@ export const Async: React.FC = () => { <> { + return allItems; + } } items={ fetchedItems } onInputChange={ fetchItems } selected={ selectedItem } diff --git a/tools/monorepo-merge/tsconfig.json b/tools/monorepo-merge/tsconfig.json index 1944eb9fbc6..b0161bbb8c7 100644 --- a/tools/monorepo-merge/tsconfig.json +++ b/tools/monorepo-merge/tsconfig.json @@ -10,6 +10,7 @@ "typeRoots": [ "./node_modules/@types" ], + "skipLibCheck": true }, "include": [ "src/**/*" diff --git a/tools/package-release/tsconfig.json b/tools/package-release/tsconfig.json index cc26db8e5bf..0a0ade3ae65 100644 --- a/tools/package-release/tsconfig.json +++ b/tools/package-release/tsconfig.json @@ -10,6 +10,7 @@ "typeRoots": [ "./node_modules/@types" ], + "skipLibCheck": true }, "include": [ "src/**/*"