Refactor Accessibility for tree components

src/components/cascadeselect/CascadeSelect.d.ts

@@ -74,6 +74,10 @@ export interface CascadeSelectProps {
      * Identifier of the underlying input element.
      */
     inputId?: string | undefined;
+    /**
+     *
+     */
+    inputProps?: object | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
      * @see CascadeSelectAppendToType
@@ -84,6 +88,10 @@ export interface CascadeSelectProps {
      * Style class of the overlay panel.
      */
     panelClass?: any;
+    /**
+     * 
+     */
+    panelProps?: object | undefined;
     /**
      * Whether the dropdown is in loading state.
      */

src/components/cascadeselect/CascadeSelect.vue

@@ -16,9 +16,9 @@
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick" role="group">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick" v-bind="panelProps">
                     <div class="p-cascadeselect-items-wrapper" role="group">
-                        <CascadeSelectSub :id="listId" role="tree" :options="options" :selectionPath="selectionPath"
+                        <CascadeSelectSub :id="listId" :options="options" :selectionPath="selectionPath"
                             :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
                             :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
                             @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" :root="true" />
@@ -63,6 +63,7 @@ export default {
             default: 'body'
         },
         panelClass: null,
+        panelProps: null,
         loading: {
             type: Boolean,
             default: false

src/components/cascadeselect/CascadeSelectSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul class="p-cascadeselect-panel p-cascadeselect-items" aria-orientation="horizontal">
+    <ul class="p-cascadeselect-panel p-cascadeselect-items" aria-orientation="horizontal" role="tree">
         <template v-for="(option,index) of options" :key="getOptionLabelToRender(option)">
             <li :class="getItemClass(option)" role="treeitem"  :aria-label="getOptionLabelToRender(option)" :aria-selected="isOptionActive(option)" :aria-expanded="isOptionActive(option)"
                 :aria-setsize="options.length" :aria-posinset="index + 1" :aria-level="level + 1">

src/components/tree/Tree.vue

@@ -10,8 +10,8 @@
                 @keydown="onFilterKeydown" v-model="filterValue" />
             <span class="p-tree-filter-icon pi pi-search"></span>
         </div>
-        <div class="p-tree-wrapper" role="tree" :style="{maxHeight: scrollHeight}">
+        <div class="p-tree-wrapper" :style="{maxHeight: scrollHeight}">
-            <ul class="p-tree-container" role="group">
+            <ul class="p-tree-container" role="tree">
                 <TreeNode v-for="(node, index) of valueToRender" :key="node.key" :node="node" :templates="$slots" :level="level + 1" :index="index"
                     :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
                     :selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>

src/components/treeselect/TreeSelect.vue

@@ -26,7 +26,7 @@
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass">
+                <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass" v-bind="panelProps">
                     <slot name="header" :value="modelValue" :options="options"></slot>
                     <div class="p-treeselect-items-wrapper" :style="{'max-height': scrollHeight}">
                         <TSTree :id="listId" :value="options" :selectionMode="selectionMode" @update:selectionKeys="onSelectionChange" :selectionKeys="modelValue"
@@ -74,6 +74,7 @@ export default {
             type: String,
             default: null
         },
+        panelProps: null,
         appendTo: {
             type: String,
             default: 'body'