feat: implement readonly property in slider and range-slider (#10985)

Author: web-padawan

packages/slider/src/styles/vaadin-slider-base-styles.js

@@ -34,6 +34,10 @@ export const sliderStyles = css`
       var(--vaadin-background-color);
   }
 
+  :host([readonly]) {
+    --vaadin-slider-fill-background: var(--vaadin-background-color);
+  }
+
   [part='track'] {
     box-sizing: border-box;
     position: absolute;
@@ -63,6 +67,11 @@ export const sliderStyles = css`
     touch-action: none;
   }
 
+  :host([readonly]) [part~='thumb'],
+  :host([readonly]) [part='track-fill'] {
+    border: dashed 1px var(--vaadin-border-color);
+  }
+
   /* visually hidden */
   ::slotted(input) {
     flex: 1;

packages/slider/src/vaadin-range-slider.js

@@ -47,9 +47,13 @@ class RangeSlider extends SliderMixin(
       css`
         :host([focus-ring][start-focused]) [part~='thumb-start'],
         :host([focus-ring][end-focused]) [part~='thumb-end'] {
-          outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+          outline: var(--vaadin-focus-ring-width) var(--_outline-style, solid) var(--vaadin-focus-ring-color);
           outline-offset: 1px;
         }
+
+        :host([readonly]) {
+          --_outline-style: dashed;
+        }
       `,
     ];
   }
@@ -278,16 +282,23 @@ class RangeSlider extends SliderMixin(
 
   /** @private */
   __onKeyDown(event) {
-    const index = this._inputElements.indexOf(event.target);
-
     const prevKeys = ['ArrowLeft', 'ArrowDown'];
     const nextKeys = ['ArrowRight', 'ArrowUp'];
 
+    const isNextKey = nextKeys.includes(event.key);
+    const isPrevKey = prevKeys.includes(event.key);
+
+    if (!isNextKey && !isPrevKey) {
+      return;
+    }
+
+    const index = this._inputElements.indexOf(event.target);
+
     // Suppress native `input` event if start and end thumbs point to the same value,
     // to prevent the case where slotted range inputs would end up in broken state.
     if (
-      this.__value[0] === this.__value[1] &&
-      ((index === 0 && nextKeys.includes(event.key)) || (index === 1 && prevKeys.includes(event.key)))
+      this.readonly ||
+      (this.__value[0] === this.__value[1] && ((index === 0 && isNextKey) || (index === 1 && isPrevKey)))
     ) {
       event.preventDefault();
     }

packages/slider/src/vaadin-slider-mixin.d.ts

@@ -25,4 +25,12 @@ export declare class SliderMixinClass {
    * The stepping interval of the slider.
    */
   step: number;
+
+  /**
+   * When true, the user cannot modify the value of the slider.
+   * The difference between `disabled` and `readonly` is that the
+   * read-only slider remains focusable and is announced by screen
+   * readers.
+   */
+  readonly: boolean;
 }

packages/slider/src/vaadin-slider-mixin.js

@@ -37,6 +37,17 @@ export const SliderMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * When true, the user cannot modify the value of the slider.
+         * The difference between `disabled` and `readonly` is that the
+         * read-only slider remains focusable and is announced by screen
+         * readers.
+         */
+        readonly: {
+          type: Boolean,
+          reflectToAttribute: true,
+        },
+
         /** @private */
         __value: {
           type: Array,
@@ -171,7 +182,7 @@ export const SliderMixin = (superClass) =>
      * @private
      */
     __onPointerDown(event) {
-      if (this.disabled || event.button !== 0) {
+      if (this.disabled || this.readonly || event.button !== 0) {
         return;
       }
 

packages/slider/src/vaadin-slider.js

@@ -48,6 +48,10 @@ class Slider extends SliderMixin(
           outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
           outline-offset: 1px;
         }
+
+        :host([readonly][focus-ring]) [part~='thumb'] {
+          outline-style: dashed;
+        }
       `,
     ];
   }
@@ -128,6 +132,7 @@ class Slider extends SliderMixin(
           .step="${step}"
           .disabled="${this.disabled}"
           tabindex="${this.disabled ? -1 : 0}"
+          @keydown="${this.__onKeyDown}"
           @input="${this.__onInput}"
           @change="${this.__onChange}"
         />
@@ -170,6 +175,14 @@ class Slider extends SliderMixin(
   __commitValue() {
     this.value = this.__value[0];
   }
+
+  /** @private */
+  __onKeyDown(event) {
+    const arrowKeys = ['ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp'];
+    if (this.readonly && arrowKeys.includes(event.key)) {
+      event.preventDefault();
+    }
+  }
 }
 
 defineCustomElement(Slider);

packages/slider/test/range-slider.test.ts

@@ -254,6 +254,12 @@ describe('vaadin-range-slider', () => {
         await sendKeys({ press: 'ArrowLeft' });
         expect(spy).to.be.calledOnce;
       });
+
+      it('should not change value on arrow key when readonly', async () => {
+        slider.readonly = true;
+        await sendKeys({ press: 'ArrowRight' });
+        expect(slider.value).to.deep.equal([0, 100]);
+      });
     });
   });
 
@@ -357,6 +363,18 @@ describe('vaadin-range-slider', () => {
 
         expect(slider.value).to.deep.equal([0, 100]);
       });
+
+      it('should not update value property on thumb pointermove when readonly', async () => {
+        slider.readonly = true;
+
+        const { x, y } = middleOfThumb(0);
+
+        await sendMouseToElement({ type: 'move', element: thumbs[0] });
+        await sendMouse({ type: 'down' });
+        await sendMouse({ type: 'move', position: [x + 20, y] });
+
+        expect(slider.value).to.deep.equal([0, 100]);
+      });
     });
 
     describe('track', () => {
@@ -439,6 +457,17 @@ describe('vaadin-range-slider', () => {
 
         expect(slider.value).to.deep.equal([20, 80]);
       });
+
+      it('should not update value property on track pointerdown when readonly', async () => {
+        slider.readonly = true;
+
+        const { x, y } = middleOfThumb(0);
+
+        await sendMouse({ type: 'move', position: [x - 20, y] });
+        await sendMouse({ type: 'down' });
+
+        expect(slider.value).to.deep.equal([20, 80]);
+      });
     });
 
     describe('thumbs limits', () => {

packages/slider/test/slider.test.ts

@@ -124,6 +124,12 @@ describe('vaadin-slider', () => {
       await sendKeys({ press: 'ArrowRight' });
       expect(spy).to.be.calledOnce;
     });
+
+    it('should not change value on arrow key when readonly', async () => {
+      slider.readonly = true;
+      await sendKeys({ press: 'ArrowRight' });
+      expect(slider.value).to.equal(0);
+    });
   });
 
   describe('pointer', () => {
@@ -246,5 +252,24 @@ describe('vaadin-slider', () => {
 
       expect(slider.value).to.equal(0);
     });
+
+    it('should not update slider value property on thumb pointermove when readonly', async () => {
+      slider.readonly = true;
+
+      await sendMouseToElement({ type: 'move', element: thumb });
+      await sendMouse({ type: 'down' });
+      await sendMouse({ type: 'move', position: [20, y] });
+
+      expect(slider.value).to.equal(0);
+    });
+
+    it('should not update slider value property on track pointerdown when readonly', async () => {
+      slider.readonly = true;
+
+      await sendMouseToElement({ type: 'move', element: track });
+      await sendMouse({ type: 'down' });
+
+      expect(slider.value).to.equal(0);
+    });
   });
 });

packages/slider/test/typings/range-slider.types.ts

@@ -27,6 +27,8 @@ assertType<number>(slider.max);
 assertType<number>(slider.min);
 assertType<number>(slider.step);
 assertType<number[]>(slider.value);
+assertType<boolean>(slider.disabled);
+assertType<boolean>(slider.readonly);
 
 // Mixins
 assertType<DisabledMixinClass>(slider);

packages/slider/test/typings/slider.types.ts

@@ -27,6 +27,8 @@ assertType<number>(slider.max);
 assertType<number>(slider.min);
 assertType<number>(slider.step);
 assertType<number>(slider.value);
+assertType<boolean>(slider.disabled);
+assertType<boolean>(slider.readonly);
 
 // Mixins
 assertType<DisabledMixinClass>(slider);