Dojo Dijit Baum mit Checkbox ist nicht Tastatur zugänglich

Question

Ich habe ein Dijit.Tree-Objekt erstellt, wo jeder Knoten ein Kontrollkästchen ist. Wenn Sie den übergeordneten Knoten auswählen/abwählen, werden die untergeordneten Knoten ausgewählt/abgewählt; Wenn eines der untergeordneten Elemente deaktiviert ist, wird das übergeordnete Element deaktiviert. Wenn alle Kinder ausgewählt sind, wird der Elternteil ausgewählt. Es funktioniert vollkommen in Ordnung.
Ich brauche es jedoch für die Tastatur zugänglich. Wenn ich zu den Baumknoten navigiere und die Leertaste oder die Eingabetaste drücke, passiert nichts.

Ich habe versucht, Tabindex und Aria-Rolle zu der Checkbox (programmgesteuert), aber es hat nicht funktioniert. Hier

ist die Geige - http://jsfiddle.net/pdabade/pyz9Lcpv/65/

require([ 
"dojo/_base/window", "dojo/store/Memory", 
"dijit/tree/ObjectStoreModel", 
"dijit/Tree", "dijit/form/CheckBox", "dojo/dom", 
"dojo/domReady!" 
], function(win, Memory, ObjectStoreModel, Tree, checkBox, dom) { 

// Create test store, adding the getChildren() method required by  ObjectStoreModel 
var myStore = new Memory({ 
data: [{ 
    id: 'allDocuments', 
    name: 'All Documents' 
}, { 
    id: 'inboxDocuments', 
    name: 'Inbox Documents', 
    parent: 'allDocuments' 
}, { 
    id: 'outboxDocuments', 
    name: 'Outbox Documents', 
    parent: 'allDocuments' 
}, { 
    id: 'draftDocuments', 
    name: 'Draft Documents', 
    parent: 'allDocuments' 
}, { 
    id: 'finalDocuments', 
    name: 'Final Documents', 
    parent: 'allDocuments' 
}], 
getChildren: function(object) { 
    return this.query({ 
    parent: object.id 
    }); 
} 
}); 
// Create the model 
var myModel = new ObjectStoreModel({ 
store: myStore, 
query: { 
    id: 'allDocuments' 
} 
}); 

// Create the Tree. 
var tree = new Tree({ 
model: myModel, 

autoExpand: true, 
getIconClass: function(item, opened) { 
    // console.log('tree getIconClass', item, opened); 
    // console.log('tree item type', item.id); 
}, 

onClick: function(item, node, event) { 
    //node._iconClass= "dijitFolderClosed"; 
    //node.iconNode.className = "dijitFolderClosed"; 
    var _this = this; 
    console.log(item.id); 
    var id = node.domNode.id, 
    isNodeSelected = node.checkBox.get('checked'); 

    dojo.query('#' + id + ' .dijitCheckBox').forEach(function(node) { 
    dijit.getEnclosingWidget(node).set('checked', isNodeSelected); 
    }); 

    if (item.id != 'allComments') { 
    if (!isNodeSelected) { 
     var parent = node.tree.rootNode; // parent node id 
     //console.log(node); 
     parent.checkBox.set('checked', false); 
    } else { 
     var parent = node.tree.rootNode; 
     var selected = true; 
     var i = 0; 
     dojo.query('#' + parent.id + '.dijitCheckBox').forEach(function(node) { 
     if (i > 0) { 
      var isSet = dijit.getEnclosingWidget(node).get('checked'); 
      console.log(isSet); 
      if (isSet == false) { 
      selected = false; 
      } 
     } 
     i++; 
     }); 
     if (selected) { 
     parent.checkBox.set('checked', true); 
     } 
    } 

    } 
    //console.log(node.id); 
}, 
_createTreeNode: function(args) { 
    var tnode = new dijit._TreeNode(args); 
    tnode.labelNode.innerHTML = args.label; 
    console.log(args); 
    var cb = new dijit.form.CheckBox({ 
    "aria-checked": "false", 
    "aria-describedby": args.label 
    }); 
    cb.placeAt(tnode.labelNode, "first"); 
    tnode.checkBox = cb; 


    return tnode; 
} 

}); 
tree.placeAt(contentHere); 
tree.startup(); 
tree.checkedItems(); 
//tree.expandAll(); 


}); 

} 

Alle Ideen, wie man es per Tastatur zugänglich?

Danke!

Answer 1

Blick in die Dijit/Tree-Source Ich sehe, dass es die Funktion _onNodePress() als Event-Handler für Tastaturereignisse setzt. Sie können sie überschreiben (oder ein Aspekt danach hinzufügen) und die Tasten drücken, die Sie manuell drücken möchten. Als Argument dient der Baumknoten und ein Ereignisobjekt, mit dem Sie gezielt nach dem Leerzeichen und dem Enter-Schlüssel suchen können.

ich gegabelt Ihre jsfiddle mit einem Beispiel: https://jsfiddle.net/pgianna/jjore5sm/1/

_onNodePress: function(/*TreeNode*/ nodeWidget, /*Event*/ e){ 
    // This is the original implementation of _onNodePress: 
    this.focusNode(nodeWidget); 

    // This requires "dojo/keys" 
    if (e.keyCode == keys.ENTER || e.keyCode == keys.SPACE) 
    { 
     var cb = nodeWidget.checkBox; 
     cb.set('checked', !cb.get('checked')); 
    } 
} 

Answer 2

Fügen Sie keine role, aria-checked, noch tabindex zum Kontrollkästchen hinzu. Diese sind bereits in die Steuerung integriert, so dass Sie das Risiko eingehen, dass Sie die Kontrolle verlieren. Sie können wahrscheinlich auch alle role="presentation" wie diejenigen sind auf <div> s und <span> s, die von Natur aus Präsentation sind. Schließlich benötigen Sie <label> für jeden Textblock, der einem Kontrollkästchen zugeordnet ist, wenn Sie darauf zugreifen möchten. Die aria-describedby ist falsch und ist sowieso die weniger gute Option.

Ich erhalte die Fehlermeldung: Uncaught TypeError: tree.checkedItems is not a function (Linie 159)

Sie auch einen großen Fokus-Management-Problem haben. Legen Sie die folgenden in Ihrem CSS und Sie werden sehen, dass es zwei Pressen der Tab Schlüssel für jede einzelne Kontrolle übernimmt (wenn bei einem fokussierten Checkbox Start): :focus {outline:2px solid #f00;}

Es sieht aus wie Sie die Elemente enthält, zu stehlen alle Klicks haben, was bedeutet, Das richtige Element wird nie ausgewählt. Die <span> mit den Klassen dijit dijitReset dijitInline dijitCheckBox stehlen den Fokus, wie es seine tabindex von -1 zu schaltet, sich selbst in und aus der Tab-Reihenfolge. Das mag ein Faktor sein.

Ich empfehle die Adressierung der Skript Fehler und dann Blick auf Fokus-Management.

Answer 3

Mit Dijit, im Hintergrund laufen alle möglichen Dinge ab, die sich außerhalb Ihrer Kontrolle befinden. Wie aardrian sagte, gibt es eine Menge Rolle = Präsentation und alle Aria-Tags auf der < input type = 'checkbox> sind überflüssig. Dijit ist wahrscheinlich (falsch) all das einstellen. Ein < input type = 'checkbox> verarbeitet bereits Selektionen und seine Rolle ist inhärent ein Kontrollkästchen. Diese Aria-Eigenschaften werden verwendet, wenn Sie ein benutzerdefiniertes Kontrollkästchen aus div/span-Tags erstellen.

Es ist ein natives Kontrollkästchen im Code vergraben, aber die Deckkraft ist auf 0 gesetzt, so dass Sie es nicht sehen können. Dijit verwendet es wahrscheinlich für die Checkbox-Ereignisse.

Das native Kontrollkästchen hat auch data-dojo-attach-event = "ondijitclick: _onClick". Ich bin mir nicht sicher, was das bedeutet, aber jedes Mal, wenn ich in einem Ereignisnamen "klicke", werde ich misstrauisch, dass es nicht mit einer Tastatur funktioniert.

Ich habe das Beispiel auf https://dojotoolkit.org/reference-guide/1.10/dijit/form/CheckBox.html versucht und es funktioniert mit der Tastatur. Trefferbereich aktiviert und deaktiviert das Kontrollkästchen.Ob Sie den Fokus auf das Kontrollkästchen sehen können, ist ein anderes Problem.

Als eine Randnotiz, könnte es nett sein, wenn Ihre Checkbox-Baum verwendet Aria-checked = "gemischt" für den übergeordneten Zweig. Jedes Mal, wenn Sie untergeordnete Kontrollkästchen haben, in denen einige ausgewählt sind und andere nicht, können Sie "gemischt" für das übergeordnete Kontrollkästchen verwenden, um eine Mischung von Auswahlen anzuzeigen. Nicht sicher, ob Dijit das unterstützt.