diff --git a/api-generator/components/slider.js b/api-generator/components/slider.js
index 412b7a2bd..519aa2ad5 100644
--- a/api-generator/components/slider.js
+++ b/api-generator/components/slider.js
@@ -41,11 +41,23 @@ const SliderProps = [
default: "false",
description: "When present, it specifies that the component should be disabled."
},
+ {
+ name: "tabindex",
+ type: "number",
+ default: "null",
+ description: "Index of the element in tabbing order."
+ },
{
name: "ariaLabelledBy",
type: "string",
default: "null",
description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+ },
+ {
+ name: "ariaLabel",
+ type: "string",
+ default: "null",
+ description: "Used to define a string that labels the element."
}
];
diff --git a/src/components/slider/Slider.d.ts b/src/components/slider/Slider.d.ts
index c3ac51c80..78a7c47c5 100755
--- a/src/components/slider/Slider.d.ts
+++ b/src/components/slider/Slider.d.ts
@@ -48,10 +48,18 @@ export interface SliderProps {
* When present, it specifies that the component should be disabled.
*/
disabled?: boolean | undefined;
+ /**
+ * Index of the element in tabbing order.
+ */
+ tabindex?: number | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
ariaLabelledBy?: string | undefined;
+ /**
+ * Used to define a string that labels the element.
+ */
+ ariaLabel?: string | undefined
}
export interface SliderSlots {
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index 5339cce6f..86b7d19d7 100755
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -1,12 +1,12 @@
-
-
-
+
+
+
@@ -42,9 +42,17 @@ export default {
type: Boolean,
default: false
},
+ tabindex: {
+ type: Number,
+ default: null
+ },
ariaLabelledBy: {
type: String,
default: null
+ },
+ ariaLabel: {
+ type: String,
+ default: null
}
},
dragging: false,
@@ -176,34 +184,22 @@ export default {
onKeyDown(event, index) {
this.handleIndex = index;
switch (event.which) {
- //down
+ //down and left
case 40:
- if (this.vertical) {
- this.decrementValue(event, index);
- event.preventDefault();
- }
- break;
- //up
- case 38:
- if (this.vertical) {
- this.incrementValue(event, index);
- event.preventDefault();
- }
- break;
- //left
case 37:
- if (this.horizontal) {
- this.decrementValue(event, index);
- event.preventDefault();
- }
+ this.decrementValue(event, index);
+ event.preventDefault();
+
break;
- //right
+
+ //up and right
+ case 38:
case 39:
- if (this.horizontal) {
- this.incrementValue(event, index);
- event.preventDefault();
- }
+ this.incrementValue(event, index);
+ event.preventDefault();
+
break;
+
default:
break;
}
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index c6a52e137..8635c7e14 100755
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -115,11 +115,23 @@ export default {
false |
When present, it specifies that the component should be disabled. |
+
+ | tabindex |
+ number |
+ null |
+ Index of the element in tabbing order. |
+
| ariaLabelledBy |
string |
null |
Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
+
+
+ | ariaLabel |
+ string |
+ null |
+ Used to define a string that labels the element. |
@@ -175,6 +187,73 @@ export default {
+ Accessibility
+
+ Screen Reader
+ Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using
+ aria-labelledby and aria-label props.
+
+
+<span id="label_number">Number</span>
+<Slider aria-labelledby="label_number" />
+
+<Slider aria-label="Number" />
+
+
+
+ Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus to the slider. |
+
+
+ |
+
+ left arrow
+ up arrow
+
+ |
+ Decrements the value. |
+
+
+ |
+
+ right arrow
+ down arrow
+
+ |
+ Increments the value. |
+
+
+ | home |
+ Set the minimum value. |
+
+
+ | end |
+ Set the maximum value. |
+
+
+ | page up |
+ Increments the value by 10 steps. |
+
+
+ | page down |
+ Decrements the value by 10 steps. |
+
+
+
+
Dependencies
None.