Refactor #3965 - For TriStateCheckbox

pull/3997/head
Tuğçe Küçükoğlu 2023-05-25 16:44:22 +03:00
parent 67e99ac4fc
commit 1cad891084
3 changed files with 4 additions and 4 deletions

View File

@ -14,7 +14,7 @@ const classes = {
} }
], ],
hiddenInputWrapper: 'p-hidden-accessible', hiddenInputWrapper: 'p-hidden-accessible',
srOnlyAria: 'p-sr-only', hiddenValueLabel: 'p-hidden-accessible',
checkbox: ({ instance, props }) => [ checkbox: ({ instance, props }) => [
'p-checkbox-box', 'p-checkbox-box',
{ {

View File

@ -55,9 +55,9 @@ export interface TriStateCheckboxPassThroughOptions {
*/ */
hiddenInput?: TriStateCheckboxPassThroughOptionType; hiddenInput?: TriStateCheckboxPassThroughOptionType;
/** /**
* Uses to pass attributes to the sr only aria's DOM element. * Uses to pass attributes to the hidden value label's DOM element.
*/ */
srOnlyAria?: TriStateCheckboxPassThroughOptionType; hiddenValueLabel?: TriStateCheckboxPassThroughOptionType;
} }
/** /**

View File

@ -16,7 +16,7 @@
v-bind="{ ...inputProps, ...ptm('hiddenInput') }" v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
/> />
</div> </div>
<span :class="cx('srOnlyAria')" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span> <span role="status" :class="cx('hiddenValueLabel')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
<div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused"> <div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
<slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')"> <slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
<component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" /> <component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />