feat: improve accessibility of tree component (backport from Qv2) (qu…

…asarframework#16404)
pdanpdan · Oct 21, 2023 · 0682f87 · 0682f87
1 parent 1b544f1
commit 0682f87
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/ui/src/components/tree/QTree.js b/ui/src/components/tree/QTree.js
@@ -512,7 +512,8 @@ export default Vue.extend({
 
             h('div', {
               staticClass: 'q-tree__children',
-              class: { 'q-tree__node--disabled': meta.disabled }
+              class: { 'q-tree__node--disabled': meta.disabled },
+              attrs: children.length > 0 ? { role: 'group' } : void 0
             }, children)
           ]
           : void 0
@@ -530,7 +531,11 @@ export default Vue.extend({
             'q-tree__node--selected': meta.selected,
             'q-tree__node--disabled': meta.disabled
           },
-          attrs: { tabindex: meta.link ? 0 : -1 },
+          attrs: {
+            tabindex: meta.link ? 0 : -1,
+            'aria-expanded': children.length > 0 ? (meta.expanded === true ? 'true' : 'false') : null,
+            role: 'treeitem'
+          },
           on: {
             click: (e) => {
               this.__onClick(node, meta, e)
@@ -689,7 +694,8 @@ export default Vue.extend({
 
     return h(
       'div', {
-        class: this.classes
+        class: this.classes,
+        attrs: { role: 'tree' }
       },
       children.length === 0
         ? (