Focus and keyboard navigation do not work in search results when disabled parents
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Idoneità per principianti
- 52/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- react, typescript
- Ambito
- accessibility, frontend
Direzione di ricerca
Inizia dal punto di ingresso getFirstMatchingNode descritto nell’issue e riproduci il comportamento usando il CodeSandbox collegato, confrontando i casi con un elemento padre disabilitato e con un elemento padre abilitato. Verifica che gli elementi figli abilitati corrispondenti possano ricevere il focus ed essere selezionati con Enter, quindi aggiungi o aggiorna la copertura di regressione se il repository contiene test pertinenti.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
What is expected?
When the tree select search is used, focus is given to the first element, users can press 'Enter' to select it or use 'up' and 'down' keys to navigate other search results
Disabled elements in the search should not be given focus, but if their children are enabled their children should still be focused in search results
What is actually happening?
Any element with a disabled parent somewhere in their hierarchy is not given focus when searching, 'Enter' key will select the first element in the tree instead
This is bad UX but also not good for accessibility
I am using master from this repo during testing
Steps to reproduce
I have a demo sandbox here made with AntD but exact behaviour comes from rc-tree-select, I can adjust the demo if needed: https://codesandbox.io/p/devbox/confident-resonance-8jv7cz
The demo shows two cases, one working (No disabled parents) and one broken (Disabled parent)
To show the component not working:
Click on the treeselect search
Search for '1' (Or '2', or '3')
The child element gets focus, pressing enter on keyboard does nothing
To show the component working as expected:
Click on the treeselect search
Search for '3' (Or '4', or '5')
The child element gets focus, pressing enter on keyboard selects element
Suggested code fix - even if a parent is disabled or not selectable, check children
// ========================== Get First Selectable Node ==========================
const getFirstMatchingNode = (nodes: EventDataNode<any>[]): EventDataNode<any> | null => {
for (const node of nodes) {
- if (node.disabled || node.selectable === false) {
- continue;
- }
-
- if (searchValue) {
- if (filterTreeNode(node)) {
- return node;
- }
- } else {
- return node;
- }
+ const isNodeSelectable = !node.disabled && node.selectable !== false;
+
+ if (isNodeSelectable) {
+ if (searchValue) {
+ if (filterTreeNode(node)) {
+ return node;
+ }
+ } else {
+ return node;
+ }
+ }
if (node[fieldNames.children]) {
const matchInChildren = getFirstMatchingNode(node[fieldNames.children]);
if (matchInChildren) {
return matchInChildren;
}
}
}
return null;
};
Demo before;
Demo after;
Initially created as an antD issue
Please let me know if I can provide any more information
- Lingua principale
- TypeScript
- Stelle
- 312
- Fork
- 204
- Merge medio
- 37m
- PR unite (30g)
- 1
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di react-component/tree-select
-
treeTitleRender 回显时函数中的targetItem中只有value属性,只return targetItem.label时有效,return 拼接数据只能获取到value属性 Aperta
Difficoltà 3/5 1-2 giorni Idoneità per principianti 45/100
react-component/tree-select#528 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 35/100
react-component/tree-select#485 ·
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 28/100
react-component/tree-select#466 ·
-
DFS这里是否能调整为尾递归 Aperta
Difficoltà 3/5 1-2 giorni Idoneità per principianti 35/100
react-component/tree-select#454 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 48/100
react-component/tree-select#437 · 3 reazioni ·
Tutte le issue di react-component/tree-select
Issue simili
-
Type/Bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
OpenNSW/nsw-srilanka#497 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
0xMiden/bridge-portal#132 ·
-
react-doctor severity:warning tech-debt
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 88/100
digidem/comapeo-cloud-app#403 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100