Refactor #3965 - For TriStateCheckbox

components/lib/tristatecheckbox/BaseTriStateCheckbox.vue

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

components/lib/tristatecheckbox/TriStateCheckbox.d.ts

@@ -55,9 +55,9 @@ export interface TriStateCheckboxPassThroughOptions {
      */
     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;
 }
 
 /**

components/lib/tristatecheckbox/TriStateCheckbox.vue

@@ -16,7 +16,7 @@
                 v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </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">
             <slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
                 <component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />