primevue 3.20.0 → 3.22.0

package/treetable/BodyCell.vue

@@ -1,11 +1,11 @@
 <template>
-    <td :style="containerStyle" :class="containerClass">
+    <td :style="containerStyle" :class="containerClass" role="cell">
         <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
             <i :class="togglerIcon"></i>
         </button>
-        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" role="checkbox" :aria-checked="checked">
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
             <div class="p-hidden-accessible">
-                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
+                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
             </div>
             <div ref="checkboxEl" :class="checkboxClass">
                 <span :class="checkboxIcon"></span>
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import { DomHandler, ObjectUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'BodyCell',

package/treetable/HeaderCell.vue

@@ -1,5 +1,5 @@
 <template>
-    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort">
+    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort" role="columnheader">
         <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
         <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
@@ -97,8 +97,10 @@ export default {
             this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
-            if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+            if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
                 this.$emit('column-click', { originalEvent: event, column: this.column });
+
+                event.preventDefault();
             }
         },
         onResizeStart(event) {

package/treetable/TreeTable.d.ts

@@ -340,6 +340,10 @@ export interface TreeTableProps {
      * Default value is 'stack'.
      */
     responsiveLayout?: TreeTableResponsiveLayoutType;
+    /**
+     * Props to pass to the table element.
+     */
+    tableProps?: any | undefined;
 }
 
 export interface TreeTableSlots {

package/treetable/TreeTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body">
+    <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table">
         <div v-if="loading" class="p-treetable-loading">
             <div class="p-treetable-loading-overlay p-component-overlay">
                 <i :class="loadingIconClass"></i>
@@ -29,9 +29,9 @@
             </template>
         </TTPaginator>
         <div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }">
-            <table ref="table">
-                <thead class="p-treetable-thead">
-                    <tr>
+            <table ref="table" role="table" v-bind="tableProps">
+                <thead class="p-treetable-thead" role="rowgroup">
+                    <tr role="row">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                             <TTHeaderCell
                                 v-if="!columnProp(col, 'hidden')"
@@ -54,19 +54,22 @@
                         </template>
                     </tr>
                 </thead>
-                <tbody class="p-treetable-tbody">
+                <tbody class="p-treetable-tbody" role="rowgroup">
                     <template v-if="!empty">
                         <TTRow
-                            v-for="node of dataToRender"
+                            v-for="(node, index) of dataToRender"
                             :key="node.key"
                             :columns="columns"
                             :node="node"
                             :level="0"
                             :expandedKeys="d_expandedKeys"
-                            @node-toggle="onNodeToggle"
                             :indentation="indentation"
                             :selectionMode="selectionMode"
                             :selectionKeys="selectionKeys"
+                            :ariaSetSize="dataToRender.length"
+                            :ariaPosInset="index + 1"
+                            :tabindex="setTabindex(node, index)"
+                            @node-toggle="onNodeToggle"
                             @node-click="onNodeClick"
                             @checkbox-change="onCheckboxChange"
                         ></TTRow>
@@ -77,8 +80,8 @@
                         </td>
                     </tr>
                 </tbody>
-                <tfoot v-if="hasFooter" class="p-treetable-tfoot">
-                    <tr>
+                <tfoot v-if="hasFooter" class="p-treetable-tfoot" role="rowgroup">
+                    <tr role="row">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                             <TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col"></TTFooterCell>
                         </template>
@@ -114,12 +117,12 @@
 </template>
 
 <script>
-import { ObjectUtils, DomHandler } from 'primevue/utils';
 import { FilterService } from 'primevue/api';
-import TreeTableRow from './TreeTableRow.vue';
-import HeaderCell from './HeaderCell.vue';
-import FooterCell from './FooterCell.vue';
 import Paginator from 'primevue/paginator';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+import FooterCell from './FooterCell.vue';
+import HeaderCell from './HeaderCell.vue';
+import TreeTableRow from './TreeTableRow.vue';
 
 export default {
     name: 'TreeTable',
@@ -288,6 +291,10 @@ export default {
         responsiveLayout: {
             type: String,
             default: null
+        },
+        tableProps: {
+            type: Object,
+            default: null
         }
     },
     documentColumnResizeListener: null,
@@ -301,7 +308,8 @@ export default {
             d_rows: this.rows,
             d_sortField: this.sortField,
             d_sortOrder: this.sortOrder,
-            d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : []
+            d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
+            hasASelectedNode: false
         };
     },
     watch: {
@@ -710,7 +718,7 @@ export default {
             this.columnResizing = true;
             this.lastResizeHelperX = event.pageX - containerLeft + this.$el.scrollLeft;
 
-            this.bindColumnResizeEvents();
+            this.bindColumnResizeEvents(event);
         },
         onColumnResize(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
@@ -783,7 +791,7 @@ export default {
                 }
             }
         },
-        bindColumnResizeEvents() {
+        bindColumnResizeEvents(event) {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
                     if (this.columnResizing) {
@@ -813,7 +821,7 @@ export default {
             }
         },
         onColumnKeyDown(event, col) {
-            if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+            if (event.code === 'Enter' && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
                 this.onColumnHeaderClick(event, col);
             }
         },
@@ -836,6 +844,24 @@ export default {
         },
         updateScrollWidth() {
             this.$refs.table.style.width = this.$refs.table.scrollWidth + 'px';
+        },
+        getItemLabel(node) {
+            return node.data.name;
+        },
+        setTabindex(node, index) {
+            if (this.isNodeSelected(node)) {
+                this.hasASelectedNode = true;
+
+                return 0;
+            }
+
+            if (this.selectionMode) {
+                if (!this.isNodeSelected(node) && index === 0 && !this.hasASelectedNode) return 0;
+            } else if (!this.selectionMode && index === 0) {
+                return 0;
+            }
+
+            return -1;
         }
     },
     computed: {

package/treetable/TreeTableRow.vue

@@ -1,5 +1,20 @@
 <template>
-    <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
+    <tr
+        ref="node"
+        :class="containerClass"
+        :style="node.style"
+        :tabindex="tabindex"
+        role="row"
+        :aria-expanded="expanded"
+        :aria-level="level + 1"
+        :aria-setsize="ariaSetSize"
+        :aria-posinset="ariaPosInset"
+        :aria-selected="getAriaSelected"
+        :aria-checked="checked || undefined"
+        @click="onClick"
+        @keydown="onKeyDown"
+        @touchend="onTouchEnd"
+    >
         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
             <TTBodyCell
                 v-if="!columnProp(col, 'hidden')"
@@ -29,6 +44,8 @@
             :selectionMode="selectionMode"
             :selectionKeys="selectionKeys"
             :indentation="indentation"
+            :ariaPosInset="node.children.indexOf(childNode) + 1"
+            :ariaSetSize="node.children.length"
             @node-toggle="$emit('node-toggle', $event)"
             @node-click="$emit('node-click', $event)"
             @checkbox-change="onCheckboxChange"
@@ -75,6 +92,18 @@ export default {
         indentation: {
             type: Number,
             default: 1
+        },
+        tabindex: {
+            type: Number,
+            default: -1
+        },
+        ariaSetSize: {
+            type: Number,
+            default: null
+        },
+        ariaPosInset: {
+            type: Number,
+            default: null
         }
     },
     nodeTouched: false,
@@ -90,70 +119,174 @@ export default {
                 return;
             }
 
+            this.setTabIndexForSelectionMode(event, this.nodeTouched);
+
             this.$emit('node-click', {
                 originalEvent: event,
                 nodeTouched: this.nodeTouched,
                 node: this.node
             });
-
             this.nodeTouched = false;
         },
         onTouchEnd() {
             this.nodeTouched = true;
         },
-        onKeyDown(event) {
-            if (event.target === this.$el) {
-                const rowElement = this.$el;
-
-                switch (event.which) {
-                    //down arrow
-                    case 40: {
-                        const nextRow = rowElement.nextElementSibling;
-
-                        if (nextRow) {
-                            nextRow.focus();
-                        }
-
-                        event.preventDefault();
-                        break;
-                    }
-
-                    //up arrow
-                    case 38: {
-                        const previousRow = rowElement.previousElementSibling;
-
-                        if (previousRow) {
-                            previousRow.focus();
-                        }
-
-                        event.preventDefault();
-                        break;
-                    }
-
-                    //right-left arrows
-                    case 37:
-
-                    case 39: {
-                        if (!this.leaf) {
-                            this.$emit('node-toggle', this.node);
-                            event.preventDefault();
-                        }
-
-                        break;
-                    }
-
-                    //enter
-                    case 13: {
-                        this.onClick(event);
-                        event.preventDefault();
-                        break;
-                    }
-
-                    default:
-                        //no op
-                        break;
+        onKeyDown(event, item) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'Space':
+                    this.onEnterKey(event, item);
+                    break;
+
+                case 'Tab':
+                    this.onTabKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            const nextElementSibling = event.currentTarget.nextElementSibling;
+
+            nextElementSibling && this.focusRowChange(event.currentTarget, nextElementSibling);
+
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            const previousElementSibling = event.currentTarget.previousElementSibling;
+
+            previousElementSibling && this.focusRowChange(event.currentTarget, previousElementSibling);
+
+            event.preventDefault();
+        },
+        onArrowRightKey(event) {
+            const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
+            const togglerElement = DomHandler.findSingle(this.$refs.node, '.p-treetable-toggler');
+
+            if (ishiddenIcon) return;
+
+            !this.expanded && togglerElement.click();
+
+            this.$nextTick(() => {
+                this.onArrowDownKey(event);
+            });
+
+            event.preventDefault();
+        },
+        onArrowLeftKey(event) {
+            if (this.level === 0 && !this.expanded) {
+                return;
+            }
+
+            const currentTarget = event.currentTarget;
+            const ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
+            const togglerElement = DomHandler.findSingle(currentTarget, '.p-treetable-toggler');
+
+            if (this.expanded && !ishiddenIcon) {
+                togglerElement.click();
+
+                return;
+            }
+
+            const target = this.findBeforeClickableNode(currentTarget);
+
+            target && this.focusRowChange(currentTarget, target);
+        },
+        onHomeKey(event) {
+            const findFirstElement = DomHandler.findSingle(event.currentTarget.parentElement, `tr[aria-level="${this.level + 1}"]`);
+
+            findFirstElement && DomHandler.focus(findFirstElement);
+
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            const nodes = DomHandler.find(event.currentTarget.parentElement, `tr[aria-level="${this.level + 1}"]`);
+            const findFirstElement = nodes[nodes.length - 1];
+
+            DomHandler.focus(findFirstElement);
+
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            event.preventDefault();
+            this.setTabIndexForSelectionMode(event, this.nodeTouched);
+
+            if (this.selectionMode === 'checkbox') {
+                this.toggleCheckbox();
+
+                return;
+            }
+
+            this.$emit('node-click', {
+                originalEvent: event,
+                nodeTouched: this.nodeTouched,
+                node: this.node
+            });
+
+            this.nodeTouched = false;
+        },
+        onTabKey() {
+            const rows = [...DomHandler.find(this.$refs.node.parentElement, 'tr')];
+            const hasSelectedRow = rows.some((row) => DomHandler.hasClass(row, 'p-highlight') || row.getAttribute('aria-checked') === 'true');
+
+            rows.forEach((row) => {
+                row.tabIndex = -1;
+            });
+
+            if (hasSelectedRow) {
+                const selectedNodes = rows.filter((node) => DomHandler.hasClass(node, 'p-highlight') || node.getAttribute('aria-checked') === 'true');
+
+                selectedNodes[0].tabIndex = 0;
+
+                return;
+            }
+
+            rows[0].tabIndex = 0;
+        },
+        focusRowChange(firstFocusableRow, currentFocusedRow) {
+            firstFocusableRow.tabIndex = '-1';
+            currentFocusedRow.tabIndex = '0';
+            DomHandler.focus(currentFocusedRow);
+        },
+        findBeforeClickableNode(node) {
+            const prevNode = node.previousElementSibling;
+
+            if (prevNode) {
+                const prevNodeButton = prevNode.querySelector('button');
+
+                if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
+                    return prevNode;
                 }
+
+                return this.findBeforeClickableNode(prevNode);
             }
+
+            return null;
         },
         toggleCheckbox() {
             let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
@@ -232,6 +365,17 @@ export default {
                 check: event.check,
                 selectionKeys: _selectionKeys
             });
+        },
+        setTabIndexForSelectionMode(event, nodeTouched) {
+            if (this.selectionMode !== null) {
+                const elements = [...DomHandler.find(this.$refs.node.parentElement, 'tr')];
+
+                event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+
+                if (elements.every((element) => element.tabIndex === -1)) {
+                    elements[0].tabIndex = 0;
+                }
+            }
         }
     },
     computed: {
@@ -243,9 +387,6 @@ export default {
                 }
             ];
         },
-        hasChildren() {
-            return this.node.children && this.node.children.length > 0;
-        },
         expanded() {
             return this.expandedKeys && this.expandedKeys[this.node.key] === true;
         },
@@ -255,14 +396,14 @@ export default {
         selected() {
             return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.node.key] === true : false;
         },
-        childLevel() {
-            return this.level + 1;
-        },
         checked() {
             return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].checked : false;
         },
         partialChecked() {
             return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked : false;
+        },
+        getAriaSelected() {
+            return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : null;
         }
     },
     components: {