From 4b175716443b355faf3a40283ab46165dd095ffe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 22 Jul 2022 13:56:18 +0300
Subject: [PATCH] Refactor Accessibility for tree components

---
 src/components/cascadeselect/CascadeSelect.d.ts   | 8 ++++++++
 src/components/cascadeselect/CascadeSelect.vue    | 5 +++--
 src/components/cascadeselect/CascadeSelectSub.vue | 2 +-
 src/components/tree/Tree.vue                      | 4 ++--
 src/components/treeselect/TreeSelect.vue          | 3 ++-
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
index fe965eeb6..01a22f31d 100644
--- a/src/components/cascadeselect/CascadeSelect.d.ts
+++ b/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.
      */
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 7afa26532..31b773bc0 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/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
diff --git a/src/components/cascadeselect/CascadeSelectSub.vue b/src/components/cascadeselect/CascadeSelectSub.vue
index 5fb9c8b78..110b09f7d 100644
--- a/src/components/cascadeselect/CascadeSelectSub.vue
+++ b/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">
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index 925e44c91..5d4430431 100755
--- a/src/components/tree/Tree.vue
+++ b/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}">
-            <ul class="p-tree-container" role="group">
+        <div class="p-tree-wrapper" :style="{maxHeight: scrollHeight}">
+            <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>
diff --git a/src/components/treeselect/TreeSelect.vue b/src/components/treeselect/TreeSelect.vue
index f9d041654..68f92aa75 100644
--- a/src/components/treeselect/TreeSelect.vue
+++ b/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'