Calendar & CascadeSelect pt name fixes

pull/4004/head
Tuğçe Küçükoğlu 2023-05-29 12:27:51 +03:00
parent 6746570c97
commit a760468c95
6 changed files with 12 additions and 12 deletions

View File

@ -200,13 +200,13 @@ const classes = {
weekLabelContainer: 'p-disabled', weekLabelContainer: 'p-disabled',
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }], day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date), 'p-disabled': !date.selectable }], dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date), 'p-disabled': !date.selectable }],
ariaSelectedDay: 'p-hidden-accessible', hiddenSelectedDay: 'p-hidden-accessible',
monthPicker: 'p-monthpicker', monthPicker: 'p-monthpicker',
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }], month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
ariaMonth: 'p-hidden-accessible', hiddenMonth: 'p-hidden-accessible',
yearPicker: 'p-yearpicker', yearPicker: 'p-yearpicker',
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }], year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
ariaYear: 'p-hidden-accessible', hiddenYear: 'p-hidden-accessible',
timePicker: 'p-timepicker', timePicker: 'p-timepicker',
hourPicker: 'p-hour-picker', hourPicker: 'p-hour-picker',
incrementButton: 'p-link', incrementButton: 'p-link',

View File

@ -199,7 +199,7 @@ export interface CalendarPassThroughOptions {
/** /**
* Uses to pass attributes to the aria selected day's DOM element. * Uses to pass attributes to the aria selected day's DOM element.
*/ */
ariaSelectedDay?: CalendarPassThroughOptionType; hiddenSelectedDay?: CalendarPassThroughOptionType;
/** /**
* Uses to pass attributes to the month picker's DOM element. * Uses to pass attributes to the month picker's DOM element.
*/ */
@ -211,7 +211,7 @@ export interface CalendarPassThroughOptions {
/** /**
* Uses to pass attributes to the aria month's DOM element. * Uses to pass attributes to the aria month's DOM element.
*/ */
ariaMonth?: CalendarPassThroughOptionType; hiddenMonth?: CalendarPassThroughOptionType;
/** /**
* Uses to pass attributes to the year picker's DOM element. * Uses to pass attributes to the year picker's DOM element.
*/ */
@ -223,7 +223,7 @@ export interface CalendarPassThroughOptions {
/** /**
* Uses to pass attributes to the aria year's DOM element. * Uses to pass attributes to the aria year's DOM element.
*/ */
ariaYear?: CalendarPassThroughOptionType; hiddenYear?: CalendarPassThroughOptionType;
/** /**
* Uses to pass attributes to the time picker's DOM element. * Uses to pass attributes to the time picker's DOM element.
*/ */

View File

@ -165,7 +165,7 @@
> >
<slot name="date" :date="date">{{ date.day }}</slot> <slot name="date" :date="date">{{ date.day }}</slot>
</span> </span>
<div v-if="isSelected(date)" :class="cx('ariaSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaSelectedDay')" :data-p-hidden-accessible="true"> <div v-if="isSelected(date)" :class="cx('hiddenSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
{{ date.day }} {{ date.day }}
</div> </div>
</td> </td>
@ -188,7 +188,7 @@
:data-p-highlight="isMonthSelected(i)" :data-p-highlight="isMonthSelected(i)"
> >
{{ m.value }} {{ m.value }}
<div v-if="isMonthSelected(i)" :class="cx('ariaMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaMonth')" :data-p-hidden-accessible="true"> <div v-if="isMonthSelected(i)" :class="cx('hiddenMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
{{ m.value }} {{ m.value }}
</div> </div>
</span> </span>
@ -206,7 +206,7 @@
:data-p-highlight="isYearSelected(y.value)" :data-p-highlight="isYearSelected(y.value)"
> >
{{ y.value }} {{ y.value }}
<div v-if="isYearSelected(y.value)" :class="cx('ariaYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('ariaYear')" :data-p-hidden-accessible="true"> <div v-if="isYearSelected(y.value)" :class="cx('hiddenYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
{{ y.value }} {{ y.value }}
</div> </div>
</span> </span>

View File

@ -111,7 +111,7 @@ const classes = {
dropdownButton: 'p-cascadeselect-trigger', dropdownButton: 'p-cascadeselect-trigger',
loadingIcon: 'p-cascadeselect-trigger-icon', loadingIcon: 'p-cascadeselect-trigger-icon',
dropdownIcon: 'p-cascadeselect-trigger-icon', dropdownIcon: 'p-cascadeselect-trigger-icon',
searchResultAria: 'p-hidden-accessible', hiddenSearchResult: 'p-hidden-accessible',
panel: ({ instance }) => [ panel: ({ instance }) => [
'p-cascadeselect-panel p-component', 'p-cascadeselect-panel p-component',
{ {

View File

@ -101,7 +101,7 @@ export interface CascadeSelectPassThroughOptions {
/** /**
* Uses to pass attributes to the search result message text aria's DOM element. * Uses to pass attributes to the search result message text aria's DOM element.
*/ */
searchResultAria?: CascadeSelectPassThroughOptionType; hiddenSearchResult?: CascadeSelectPassThroughOptionType;
/** /**
* Uses to pass attributes to the selected message text aria's DOM element. * Uses to pass attributes to the selected message text aria's DOM element.
*/ */

View File

@ -38,7 +38,7 @@
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" /> <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
</slot> </slot>
</div> </div>
<span role="status" aria-live="polite" :class="cx('searchResultAria')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('searchResultAria')" :data-p-hidden-accessible="true"> <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
{{ searchResultMessageText }} {{ searchResultMessageText }}
</span> </span>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">