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

Refactor Accessibility for tree components

pull/2809/head
Tuğçe Küçükoğlu 2022-07-22 13:56:18 +03:00
parent f8725ae262
commit 4b17571644
5 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -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.
*/

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

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

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

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

4
src/components/tree/Tree.vue
View File

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

3
src/components/treeselect/TreeSelect.vue
View File

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