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"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave"> <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 :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" <CascadeSelectSub :id="listId" :options="options" :selectionPath="selectionPath"
:optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots" :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
@ -282,26 +282,39 @@ export default {
case 'Down': case 'Down':
case 'ArrowDown': case 'ArrowDown':
if (this.overlayVisible) { 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(); this.show();
} }
event.preventDefault(); event.preventDefault();
break; break;
case 'Space': case 'Space':
case 'Enter':
if (this.overlayVisible) { if (this.overlayVisible) {
this.hide(); this.hide();
} }
else { else {
this.show(); this.show();
} }
event.preventDefault(); event.preventDefault();
break; break;
case 'Escape':
case 'Tab': case 'Tab':
this.hide(); if (this.overlayVisible) {
this.hide();
event.preventDefault();
}
break;
default:
break; break;
} }
}, },
@ -349,7 +362,7 @@ export default {
return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down']; return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
}, },
listId() { listId() {
return UniqueComponentId() + '_list'; return this.overlayVisible ? UniqueComponentId() + '_list' : null;
} }
}, },
components: { components: {

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

@ -1,5 +1,5 @@
<template> <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)"> <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)" <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"> :aria-setsize="options.length" :aria-posinset="index + 1" :aria-level="level + 1">