vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update roles and keyboard support for CascadeSelect

pull/2809/head
Tuğçe Küçükoğlu 2022-07-27 12:06:59 +03:00
parent 96f6fc9d82
commit 3eccd05f26
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/cascadeselect/CascadeSelect.vue
View File

@ -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: {

2
src/components/cascadeselect/CascadeSelectSub.vue
View File

@ -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">