IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

NestedFolderPicker: Expand/collapse keyboard handling (#70949)

Browse Source 
* better keyboard handling in NestedFolderList

* add check for foldersAreOpenable
This commit is contained in:
Ashley Harrison 2023-07-04 12:55:25 +01:00 committed by GitHub
parent 61a77b4f6b
commit 0e4743b852
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/core/components/NestedFolderPicker/NestedFolderList.tsx
View File

@ -80,6 +80,17 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
[item, onSelectionChange] [item, onSelectionChange]
); );
const handleKeyDown = useCallback(
(ev: React.KeyboardEvent<HTMLInputElement>) => {
// Expand/collapse folder on arrow keys
if (foldersAreOpenable && (ev.key === 'ArrowRight' || ev.key === 'ArrowLeft')) {
ev.preventDefault();
onFolderClick(item.uid, ev.key === 'ArrowRight');
}
},
[item.uid, foldersAreOpenable, onFolderClick]
);
if (item.kind !== 'folder') { if (item.kind !== 'folder') {
return process.env.NODE_ENV !== 'production' ? ( return process.env.NODE_ENV !== 'production' ? (
<span style={virtualStyles} className={styles.row}> <span style={virtualStyles} className={styles.row}>
@ -98,6 +109,7 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
name="folder" name="folder"
checked={item.uid === selectedFolder} checked={item.uid === selectedFolder}
onChange={handleRadioChange} onChange={handleRadioChange}
onKeyDown={handleKeyDown}
/> />
<div className={styles.rowBody}> <div className={styles.rowBody}>
@ -107,6 +119,8 @@ function Row({ index, style: virtualStyles, data }: RowProps) {
<IconButton <IconButton
size={CHEVRON_SIZE} size={CHEVRON_SIZE}
onClick={handleClick} onClick={handleClick}
// tabIndex not needed here because we handle keyboard navigation at the radio button level
tabIndex={-1}
aria-label={isOpen ? 'Collapse folder' : 'Expand folder'} aria-label={isOpen ? 'Collapse folder' : 'Expand folder'}
name={isOpen ? 'angle-down' : 'angle-right'} name={isOpen ? 'angle-down' : 'angle-right'}
/> />