From 3eccd05f26bdd311d120660bbeb144501256e554 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: Wed, 27 Jul 2022 12:06:59 +0300
Subject: [PATCH] Update roles and keyboard support for CascadeSelect

---
 .../cascadeselect/CascadeSelect.vue           | 23 +++++++++++++++----
 .../cascadeselect/CascadeSelectSub.vue        |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 3b586f346..71ffcac74 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -17,7 +17,7 @@
         <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" v-bind="panelProps">
-                    <div class="p-cascadeselect-items-wrapper" role="group">
+                    <div class="p-cascadeselect-items-wrapper">
                         <CascadeSelectSub :id="listId" :options="options" :selectionPath="selectionPath"
                             :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
                             :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
@@ -282,26 +282,39 @@ export default {
                 case 'Down':
                 case 'ArrowDown':
                     if (this.overlayVisible) {
-                        DomHandler.findSingle(this.overlay, '.p-cascadeselect-item').children[0].focus();
+                        if (DomHandler.findSingle(this.overlay, '.p-highlight')) {
+                            DomHandler.findSingle(this.overlay, '.p-highlight').focus();
+                        }
+                        else DomHandler.findSingle(this.overlay, '.p-cascadeselect-item').children[0].focus();
                     }
-                    else if (event.altKey && this.options && this.options.length) {
+                    else {
                         this.show();
                     }
+
                     event.preventDefault();
                 break;
 
                 case 'Space':
+                case 'Enter':
                     if (this.overlayVisible) {
                         this.hide();
                     }
                     else {
                         this.show();
                     }
+
                     event.preventDefault();
                 break;
 
+                case 'Escape':
                 case 'Tab':
-                    this.hide();
+                    if (this.overlayVisible) {
+                        this.hide();
+                        event.preventDefault();
+                    }
+                break;
+
+                default:
                 break;
             }
         },
@@ -349,7 +362,7 @@ export default {
             return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         },
         listId() {
-            return UniqueComponentId() + '_list';
+            return this.overlayVisible ? UniqueComponentId() + '_list' : null;
         }
     },
     components: {
diff --git a/src/components/cascadeselect/CascadeSelectSub.vue b/src/components/cascadeselect/CascadeSelectSub.vue
index 110b09f7d..6f0d8907d 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" role="tree">
+    <ul class="p-cascadeselect-panel p-cascadeselect-items" aria-orientation="horizontal" :role="root === true ? 'tree' : 'group'">
         <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">