@spectrum-web-components/slider - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+# [0.4.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.3.3...@spectrum-web-components/slider@0.4.0) (2020-01-06)
+
+### Bug Fixes
+
+-   **slider:** fixes usage of aria-valuetext, adds aria-valuenow ([4b25a89](https://github.com/adobe/spectrum-web-components/commit/4b25a89))
+
+### Features
+
+-   **slider:** adds getAriaValueText property, fixes [#381](https://github.com/adobe/spectrum-web-components/issues/381) ([5800915](https://github.com/adobe/spectrum-web-components/commit/5800915))
+
 ## [0.3.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.3.2...@spectrum-web-components/slider@0.3.3) (2019-12-12)
@@ -8,0 +18,0 @@

custom-elements.json

@@ -71,2 +71,3 @@ {
           "name": "type",
+          "attribute": "type",
           "type": "string"
@@ -80,6 +81,12 @@ },
           "name": "variant",
+          "attribute": "variant",
           "type": "string"
         },
         {
+          "name": "getAriaValueText",
+          "type": "(value: number) => string"
+        },
+        {
           "name": "label",
+          "attribute": "label",
           "type": "string"
@@ -89,2 +96,3 @@ },
           "name": "ariaLabel",
+          "attribute": "aria-label",
           "type": "string | undefined"
@@ -94,2 +102,3 @@ },
           "name": "max",
+          "attribute": "max",
           "type": "number"
@@ -99,2 +108,3 @@ },
           "name": "min",
+          "attribute": "min",
           "type": "number"
@@ -104,2 +114,3 @@ },
           "name": "step",
+          "attribute": "step",
           "type": "number"
@@ -109,2 +120,3 @@ },
           "name": "tickStep",
+          "attribute": "tick-step",
           "type": "number"
@@ -114,2 +126,3 @@ },
           "name": "tickLabels",
+          "attribute": "tick-labels",
           "type": "boolean"
@@ -119,2 +132,3 @@ },
           "name": "disabled",
+          "attribute": "disabled",
           "type": "boolean"
@@ -124,2 +138,3 @@ },
           "name": "dragging",
+          "attribute": "dragging",
           "type": "boolean"
@@ -129,2 +144,3 @@ },
           "name": "handleHighlight",
+          "attribute": "handle-highlight",
           "type": "boolean"
@@ -131,0 +147,0 @@ }

lib/slider.d.ts

@@ -11,2 +11,4 @@ import { CSSResultArray, TemplateResult, PropertyValues } from 'lit-element';
     private _variant;
+    getAriaValueText: (value: number) => string;
+    private readonly ariaValueText;
     label: string;
@@ -13,0 +15,0 @@ ariaLabel?: string;

lib/slider.js

@@ -25,2 +25,3 @@ /*
         this._variant = '';
+        this.getAriaValueText = (value) => `${value}`;
         this.label = '';
@@ -84,2 +85,8 @@ this.max = 20;
     }
+    get ariaValueText() {
+        if (!this.getAriaValueText) {
+            return `${this.value}`;
+        }
+        return this.getAriaValueText(this.value);
+    }
     get focusElement() {
@@ -114,3 +121,3 @@ return this.input ? this.input : this;
                 >
-                    ${this.value}
+                    ${this.ariaValueText}
                 </div>
@@ -210,5 +217,6 @@ </div>
                     aria-label=${this.ariaLabel || this.label}
+                    aria-valuenow=${this.value}
                     aria-valuemin=${this.min}
                     aria-valuemax=${this.max}
-                    aria-valuetext=${this.value}
+                    aria-valuetext=${this.ariaValueText}
                     @change=${this.onInputChange}
@@ -404,2 +412,8 @@ @focus=${this.onInputFocus}
 __decorate([
+    property({ attribute: false })
+], Slider.prototype, "getAriaValueText", void 0);
+__decorate([
+    property({ attribute: false })
+], Slider.prototype, "ariaValueText", null);
+__decorate([
     property()
@@ -406,0 +420,0 @@ ], Slider.prototype, "label", void 0);

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.3.3",
+    "version": "0.4.0",
     "description": "",
@@ -45,6 +45,6 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/shared": "^0.3.3",
+        "@spectrum-web-components/shared": "^0.4.0",
         "tslib": "^1.10.0"
     },
-    "gitHead": "c675f8d2840e8ebba47ecc47167265e61514a864"
+    "gitHead": "8ccfbecc2e7534567967bbebb5d201e0b16b08bb"
 }

README.md

@@ -5,2 +5,12 @@ ## Overview
 
+### Installation
+
+```
+npm install @spectrum-web-components/slider
+
+# or
+
+yarn add @spectrum-web-components/slider
+```
+
 ### Example
@@ -7,0 +17,0 @@

src/slider.ts

@@ -77,2 +77,13 @@ /*
 
+    @property({ attribute: false })
+    public getAriaValueText: (value: number) => string = (value) => `${value}`;
+
+    @property({ attribute: false })
+    private get ariaValueText(): string {
+        if (!this.getAriaValueText) {
+            return `${this.value}`;
+        }
+        return this.getAriaValueText(this.value);
+    }
+
     @property()
@@ -149,3 +160,3 @@ public label = '';
                 >
-                    ${this.value}
+                    ${this.ariaValueText}
                 </div>
@@ -252,5 +263,6 @@ </div>
                     aria-label=${this.ariaLabel || this.label}
+                    aria-valuenow=${this.value}
                     aria-valuemin=${this.min}
                     aria-valuemax=${this.max}
-                    aria-valuetext=${this.value}
+                    aria-valuetext=${this.ariaValueText}
                     @change=${this.onInputChange}
@@ -257,0 +269,0 @@ @focus=${this.onInputFocus}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166505

increased by1.78%

Lines of code

2420

increased by1.77%

Number of lines in readme file

46

increased by27.78%

Dependency changes

• + Added@spectrum-web-components/shared@0.4.7(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removed@spectrum-web-components/shared@0.3.3(transitive)

• Updated@spectrum-web-components/shared@^0.4.0