feat(Slider): improve a11y when disabled or readonly (#9880)

packages/vant/src/slider/Slider.tsx

@@ -294,10 +294,12 @@ export default defineComponent({
         <div
           role="slider"
           class={getButtonClassName(index)}
-          tabindex={props.disabled || props.readonly ? undefined : 0}
+          tabindex={props.disabled ? undefined : 0}
           aria-valuemin={+props.min}
           aria-valuenow={current}
           aria-valuemax={+props.max}
+          aria-disabled={props.disabled || undefined}
+          aria-readonly={props.readonly || undefined}
           aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
           onTouchstart={(event) => {
             if (typeof index === 'number') {

packages/vant/src/slider/test/__snapshots__/demo.spec.ts.snap

@@ -79,6 +79,7 @@ exports[`should render demo and match snapshot 1`] = `
            aria-valuemin="0"
            aria-valuenow="50"
            aria-valuemax="100"
+           aria-disabled="true"
            aria-orientation="horizontal"
       >
         <div class="van-slider__button">

packages/vant/src/slider/test/__snapshots__/index.spec.ts.snap

@@ -29,6 +29,27 @@ exports[`should render left-button、right-button slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render readonly Slider correctly 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar"
+       style="width: 50%; left: 0%;"
+  >
+    <div role="slider"
+         class="van-slider__button-wrapper van-slider__button-wrapper--right"
+         tabindex="0"
+         aria-valuemin="0"
+         aria-valuenow="50"
+         aria-valuemax="100"
+         aria-readonly="true"
+         aria-orientation="horizontal"
+    >
+      <div class="van-slider__button">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render reversed range slider correctly 1`] = `
 <div class="van-slider">
   <div class="van-slider__bar"

packages/vant/src/slider/test/index.spec.ts

@@ -117,6 +117,17 @@ test('should not allow to click slider when readonly', async () => {
   expect(wrapper.emitted('update:modelValue')).toBeFalsy();
 });
 
+test('should render readonly Slider correctly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      modelValue: 50,
+      readonly: true,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 test('should allow to drag vertical slider', () => {
   const restoreMock = mockRect(true);