diff --git a/.changeset/stupid-seas-stare.md b/.changeset/stupid-seas-stare.md new file mode 100644 index 0000000000..f3d4f5e1f7 --- /dev/null +++ b/.changeset/stupid-seas-stare.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fix accessibility issue on controlled select input on tab navigation + keyboard enter/space action. diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx index 1b57e0d4da..dbf5601112 100644 --- a/packages/core-components/src/components/Select/Select.tsx +++ b/packages/core-components/src/components/Select/Select.tsx @@ -16,7 +16,6 @@ import Box from '@material-ui/core/Box'; import Checkbox from '@material-ui/core/Checkbox'; import Chip from '@material-ui/core/Chip'; -import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import FormControl from '@material-ui/core/FormControl'; import InputBase from '@material-ui/core/InputBase'; import InputLabel from '@material-ui/core/InputLabel'; @@ -171,7 +170,7 @@ export function SelectComponent(props: SelectProps) { onChange(event.target.value as SelectedItems); }; - const handleClick = (event: React.ChangeEvent) => { + const handleOpen = (event: React.ChangeEvent) => { if (disabled) { event.preventDefault(); return; @@ -184,7 +183,7 @@ export function SelectComponent(props: SelectProps) { }); }; - const handleClickAway = () => { + const handleClose = () => { setOpen(false); }; @@ -196,88 +195,85 @@ export function SelectComponent(props: SelectProps) { return ( - - - {label} - } + label={label} + tabIndex={0} + renderValue={s => + multiple && (value as any[]).length !== 0 ? ( + + {(s as string[]).map(selectedValue => ( + el.value === selectedValue)?.value} + label={items.find(el => el.value === selectedValue)?.label} + clickable + onDelete={handleDelete(selectedValue)} + className={classes.chip} + /> ))} - - - + + ) : ( + + {(value as any[]).length === 0 + ? placeholder || '' + : items.find(el => el.value === s)?.label} + + ) + } + IconComponent={() => + !isOpen ? : + } + MenuProps={{ + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + transformOrigin: { + vertical: 'top', + horizontal: 'left', + }, + getContentAnchorEl: null, + }} + > + {placeholder && !multiple && ( + {placeholder} + )} + {native + ? items && + items.map(item => ( + + )) + : items && + items.map(item => ( + + {multiple && ( + + )} + {item.label} + + ))} + + ); }