From 4181954bf41fd3b068ffd2bb84bde1211f309b64 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Tue, 19 Jan 2021 14:27:41 +0200 Subject: [PATCH 1/9] initial commit --- packages/main/src/RangeSlider.hbs | 46 ++++++++++++++++++- packages/main/src/RangeSlider.js | 27 +++++++++++ packages/main/src/Slider.hbs | 22 ++++++++- packages/main/src/Slider.js | 13 +++++- packages/main/src/SliderBase.hbs | 6 +-- .../main/src/i18n/messagebundle.properties | 12 +++++ packages/main/src/themes/SliderBase.css | 2 + 7 files changed, 120 insertions(+), 8 deletions(-) diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs index 0c01161c6fee..81600a71af9d 100644 --- a/packages/main/src/RangeSlider.hbs +++ b/packages/main/src/RangeSlider.hbs @@ -1,14 +1,56 @@ {{>include "./SliderBase.hbs"}} +{{_ariaLabelledByText}} +{{_ariaLeftHandleText}} +{{_ariaRightHandleText}} + +{{#*inline "progressbar"}} +
+
+
+{{/inline}} + {{#*inline "handles"}} -
+
{{#if showTooltip}}
{{tooltipStartValue}}
{{/if}}
-
+
{{#if showTooltip}}
{{tooltipEndValue}} diff --git a/packages/main/src/RangeSlider.js b/packages/main/src/RangeSlider.js index 83e221f8aca5..7b2d032e03e8 100644 --- a/packages/main/src/RangeSlider.js +++ b/packages/main/src/RangeSlider.js @@ -4,6 +4,13 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import SliderBase from "./SliderBase.js"; import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js"; +// Texts +import { + RANGE_SLIDER_ARIA_DESCRIPTION, + RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION, + RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION, +} from "./generated/i18n/i18n-defaults.js"; + /** * @public */ @@ -112,6 +119,26 @@ class RangeSlider extends SliderBase { return this.endValue.toFixed(stepPrecision); } + get _ariaDisabled() { + return this.disabled || undefined; + } + + get _ariaLabelledByText() { + return this.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION); + } + + get _ariaLeftHandleText() { + const isRTL = this.effectiveDir === "rtl"; + + return !isRTL ? this.i18nBundle.getText(RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION) : this.i18nBundle.getText(RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION); + } + + get _ariaRightHandleText() { + const isRTL = this.effectiveDir === "rtl"; + + return !isRTL ? this.i18nBundle.getText(RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION) : this.i18nBundle.getText(RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION); + } + /** * Check if the previously saved state is outdated. That would mean * either it is the initial rendering or that a property has been changed diff --git a/packages/main/src/Slider.hbs b/packages/main/src/Slider.hbs index e2d9e62937ad..aaa71965c1bc 100644 --- a/packages/main/src/Slider.hbs +++ b/packages/main/src/Slider.hbs @@ -1,9 +1,29 @@ {{>include "./SliderBase.hbs"}} +{{ariaLabelledByText}} + +{{#*inline "progressbar"}} + +{{/inline}} + {{#*inline "handles"}}
-
-
+ {{> progressbar}} + {{> handles}}
+{{#*inline "progressbar"}}{{/inline}} {{#*inline "handles"}}{{/inline}} diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index ec3b84191425..e3ee8d62053e 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -283,6 +283,15 @@ MULTIINPUT_SHOW_MORE_TOKENS={0} More #XTOL: Tooltip for panel expand title PANEL_ICON=Expand/Collapse +#XACT: ARIA description for the slider +RANGE_SLIDER_ARIA_DESCRIPTION=Range + +#XACT: ARIA description for the slider +RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION=Left handle + +#XACT: ARIA description for the slider +RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION=Right handle + #XBUT: Rating indicator tooltip text RATING_INDICATOR_TOOLTIP_TEXT=Rating @@ -292,6 +301,9 @@ RATING_INDICATOR_TEXT=Rating Indicator #XACT: ARIA description for the segmented button SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button +#XACT: ARIA description for the slider +SLIDER_ARIA_DESCRIPTION=Slider handle + #XACT: ARIA announcement for the switch on SWITCH_ON=On diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 091fd15382aa..9cbd54fc42af 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -1,3 +1,5 @@ +@import "./InvisibleTextStyles.css"; + :host([disabled]) { opacity: var(--_ui5_slider_disabled_opacity); cursor: default; From 9a079cef49f964b5562e68d05a58b7b4148b41c8 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Tue, 19 Jan 2021 14:27:41 +0200 Subject: [PATCH 2/9] initial commit --- packages/main/src/RangeSlider.hbs | 50 ++++++++++++++++++- packages/main/src/RangeSlider.js | 31 ++++++++++-- packages/main/src/Slider.hbs | 22 +++++++- packages/main/src/Slider.js | 13 ++++- packages/main/src/SliderBase.hbs | 6 +-- .../main/src/i18n/messagebundle.properties | 12 +++++ packages/main/src/themes/SliderBase.css | 2 + 7 files changed, 125 insertions(+), 11 deletions(-) diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs index 6ebefdbec6c1..c7bf8a653092 100644 --- a/packages/main/src/RangeSlider.hbs +++ b/packages/main/src/RangeSlider.hbs @@ -1,14 +1,62 @@ {{>include "./SliderBase.hbs"}} +{{_ariaLabelledByText}} +{{_ariaLeftHandleText}} +{{_ariaRightHandleText}} + +{{#*inline "progressbar"}} +
+
+
+{{/inline}} + {{#*inline "handles"}} -
+
{{#if showTooltip}}
{{tooltipStartValue}}
{{/if}}
+<<<<<<< HEAD
+======= +
+>>>>>>> initial commit {{#if showTooltip}}
{{tooltipEndValue}} diff --git a/packages/main/src/RangeSlider.js b/packages/main/src/RangeSlider.js index 886e3b00aa13..4a33a0a355d0 100644 --- a/packages/main/src/RangeSlider.js +++ b/packages/main/src/RangeSlider.js @@ -8,6 +8,13 @@ import { import SliderBase from "./SliderBase.js"; import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js"; +// Texts +import { + RANGE_SLIDER_ARIA_DESCRIPTION, + RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION, + RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION, +} from "./generated/i18n/i18n-defaults.js"; + /** * @public */ @@ -119,6 +126,26 @@ class RangeSlider extends SliderBase { return this.endValue.toFixed(stepPrecision); } + get _ariaDisabled() { + return this.disabled || undefined; + } + + get _ariaLabelledByText() { + return this.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION); + } + + get _ariaLeftHandleText() { + const isRTL = this.effectiveDir === "rtl"; + + return !isRTL ? this.i18nBundle.getText(RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION) : this.i18nBundle.getText(RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION); + } + + get _ariaRightHandleText() { + const isRTL = this.effectiveDir === "rtl"; + + return !isRTL ? this.i18nBundle.getText(RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION) : this.i18nBundle.getText(RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION); + } + /** * Check if the previously saved state is outdated. That would mean * either it is the initial rendering or that a property has been changed @@ -678,10 +705,6 @@ class RangeSlider extends SliderBase { return this.getDomRef().querySelector(".ui5-slider-progress"); } - get tabIndexProgress() { - return this.tabIndex; - } - get styles() { return { progress: { diff --git a/packages/main/src/Slider.hbs b/packages/main/src/Slider.hbs index e2d9e62937ad..aaa71965c1bc 100644 --- a/packages/main/src/Slider.hbs +++ b/packages/main/src/Slider.hbs @@ -1,9 +1,29 @@ {{>include "./SliderBase.hbs"}} +{{ariaLabelledByText}} + +{{#*inline "progressbar"}} + +{{/inline}} + {{#*inline "handles"}}
-
-
+ {{> progressbar}} + {{> handles}}
+{{#*inline "progressbar"}}{{/inline}} {{#*inline "handles"}}{{/inline}} diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index ec3b84191425..e3ee8d62053e 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -283,6 +283,15 @@ MULTIINPUT_SHOW_MORE_TOKENS={0} More #XTOL: Tooltip for panel expand title PANEL_ICON=Expand/Collapse +#XACT: ARIA description for the slider +RANGE_SLIDER_ARIA_DESCRIPTION=Range + +#XACT: ARIA description for the slider +RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION=Left handle + +#XACT: ARIA description for the slider +RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION=Right handle + #XBUT: Rating indicator tooltip text RATING_INDICATOR_TOOLTIP_TEXT=Rating @@ -292,6 +301,9 @@ RATING_INDICATOR_TEXT=Rating Indicator #XACT: ARIA description for the segmented button SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button +#XACT: ARIA description for the slider +SLIDER_ARIA_DESCRIPTION=Slider handle + #XACT: ARIA announcement for the switch on SWITCH_ON=On diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 7a4d4d641b68..76b584e24f1e 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -1,3 +1,5 @@ +@import "./InvisibleTextStyles.css"; + :host([disabled]) { opacity: var(--_ui5_slider_disabled_opacity); cursor: default; From 867a8e11973e5982b88c9312a4901bd402464268 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Thu, 21 Jan 2021 10:51:56 +0200 Subject: [PATCH 3/9] replace tabindex --- packages/main/src/Slider.hbs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Slider.hbs b/packages/main/src/Slider.hbs index aaa71965c1bc..d05ca25d387f 100644 --- a/packages/main/src/Slider.hbs +++ b/packages/main/src/Slider.hbs @@ -15,17 +15,17 @@ {{#*inline "handles"}}
{{#if showTooltip}} From 4d2fede2e00a40aaa5badf09d5fe14dc7d099b99 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Thu, 21 Jan 2021 11:02:26 +0200 Subject: [PATCH 4/9] add focus handlers in rangeslider --- packages/main/src/RangeSlider.hbs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs index 1dd19a7bc858..b092c3ac36e2 100644 --- a/packages/main/src/RangeSlider.hbs +++ b/packages/main/src/RangeSlider.hbs @@ -8,6 +8,8 @@
Date: Thu, 21 Jan 2021 16:18:27 +0200 Subject: [PATCH 5/9] aria labelledby is now swapped --- packages/main/src/RangeSlider.hbs | 8 +++--- packages/main/src/RangeSlider.js | 28 +++++++++++++++---- .../main/src/i18n/messagebundle.properties | 4 +-- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs index b092c3ac36e2..139227aac415 100644 --- a/packages/main/src/RangeSlider.hbs +++ b/packages/main/src/RangeSlider.hbs @@ -1,8 +1,8 @@ {{>include "./SliderBase.hbs"}} {{_ariaLabelledByText}} -{{_ariaLeftHandleText}} -{{_ariaRightHandleText}} +{{_ariaStartHandleText}} +{{_ariaEndHandleText}} {{#*inline "progressbar"}}
@@ -33,7 +33,7 @@ aria-valuemin="{{min}}" aria-valuemax="{{max}}" aria-valuenow="{{startValue}}" - aria-labelledby="{{_id}}-leftHandleDesc" + aria-labelledby="{{_id}}-startHandleDesc" aria-disabled="{{_ariaDisabled}}" > {{#if showTooltip}} @@ -53,7 +53,7 @@ aria-valuemin="{{min}}" aria-valuemax="{{max}}" aria-valuenow="{{endValue}}" - aria-labelledby="{{_id}}-rightHandleDesc" + aria-labelledby="{{_id}}-endHandleDesc" aria-disabled="{{_ariaDisabled}}" > {{#if showTooltip}} diff --git a/packages/main/src/RangeSlider.js b/packages/main/src/RangeSlider.js index 4a33a0a355d0..7bc0cd5f69f7 100644 --- a/packages/main/src/RangeSlider.js +++ b/packages/main/src/RangeSlider.js @@ -11,8 +11,8 @@ import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.j // Texts import { RANGE_SLIDER_ARIA_DESCRIPTION, - RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION, - RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION, + RANGE_SLIDER_START_HANDLE_DESCRIPTION, + RANGE_SLIDER_END_HANDLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js"; /** @@ -134,16 +134,32 @@ class RangeSlider extends SliderBase { return this.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION); } - get _ariaLeftHandleText() { + get _ariaStartHandleText() { const isRTL = this.effectiveDir === "rtl"; + const isReversed = this._areValuesReversed(); + let startHandleText; + + if ((isRTL && !isReversed) || (!isRTL && isReversed)) { + startHandleText = this.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION); + } else { + startHandleText = this.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION); + } - return !isRTL ? this.i18nBundle.getText(RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION) : this.i18nBundle.getText(RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION); + return startHandleText; } - get _ariaRightHandleText() { + get _ariaEndHandleText() { const isRTL = this.effectiveDir === "rtl"; + const isReversed = this._areValuesReversed(); + let endHandleText; + + if ((isRTL && !isReversed) || (!isRTL && isReversed)) { + endHandleText = this.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION); + } else { + endHandleText = this.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION); + } - return !isRTL ? this.i18nBundle.getText(RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION) : this.i18nBundle.getText(RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION); + return endHandleText; } /** diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index e3ee8d62053e..6e554bac0b14 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -287,10 +287,10 @@ PANEL_ICON=Expand/Collapse RANGE_SLIDER_ARIA_DESCRIPTION=Range #XACT: ARIA description for the slider -RANGE_SLIDER_LEFT_HANDLE_DESCRIPTION=Left handle +RANGE_SLIDER_START_HANDLE_DESCRIPTION=Left handle #XACT: ARIA description for the slider -RANGE_SLIDER_RIGHT_HANDLE_DESCRIPTION=Right handle +RANGE_SLIDER_END_HANDLE_DESCRIPTION=Right handle #XBUT: Rating indicator tooltip text RATING_INDICATOR_TOOLTIP_TEXT=Rating From 7baa4db9ccabb10661fffe4afaa5c190ca41e4f8 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Mon, 25 Jan 2021 10:25:50 +0200 Subject: [PATCH 6/9] apply comments and add tests --- packages/main/src/RangeSlider.hbs | 7 +- packages/main/src/RangeSlider.js | 26 ++----- packages/main/src/Slider.hbs | 4 +- packages/main/src/Slider.js | 2 +- packages/main/src/SliderBase.hbs | 6 +- packages/main/src/SliderBase.js | 9 --- .../main/src/i18n/messagebundle.properties | 8 +-- packages/main/test/specs/RangeSlider.spec.js | 71 +++++++++++++++++-- packages/main/test/specs/Slider.spec.js | 21 +++++- 9 files changed, 103 insertions(+), 51 deletions(-) diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs index 139227aac415..e028fc9ae515 100644 --- a/packages/main/src/RangeSlider.hbs +++ b/packages/main/src/RangeSlider.hbs @@ -1,10 +1,9 @@ {{>include "./SliderBase.hbs"}} -{{_ariaLabelledByText}} -{{_ariaStartHandleText}} -{{_ariaEndHandleText}} +{{_ariaHandlesText.startHandleText}} +{{_ariaHandlesText.endHandleText}} -{{#*inline "progressbar"}} +{{#*inline "progressBar"}}
include "./SliderBase.hbs"}} -{{ariaLabelledByText}} - -{{#*inline "progressbar"}} +{{#*inline "progressBar"}} -{{#*inline "progressbar"}}{{/inline}} +{{_ariaLabelledByText}} + +{{#*inline "progressBar"}}{{/inline}} {{#*inline "handles"}}{{/inline}} diff --git a/packages/main/src/SliderBase.js b/packages/main/src/SliderBase.js index 7b7a4869c26e..581c73ea43c9 100644 --- a/packages/main/src/SliderBase.js +++ b/packages/main/src/SliderBase.js @@ -114,11 +114,6 @@ const metadata = { _hiddenTickmarks: { type: Boolean, }, - _tabIndex: { - type: String, - defaultValue: "0", - noAttribute: true, - }, }, events: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */ { /** @@ -837,10 +832,6 @@ class SliderBase extends UI5Element { get _effectiveMax() { return Math.max(this.min, this.max); } - - get tabIndex() { - return this.disabled ? "-1" : this._tabIndex; - } } export default SliderBase; diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 6e554bac0b14..7649480d6a8a 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -283,13 +283,13 @@ MULTIINPUT_SHOW_MORE_TOKENS={0} More #XTOL: Tooltip for panel expand title PANEL_ICON=Expand/Collapse -#XACT: ARIA description for the slider +#XACT: ARIA description for range slider progress RANGE_SLIDER_ARIA_DESCRIPTION=Range -#XACT: ARIA description for the slider +#XACT: ARIA description for range slider start handle RANGE_SLIDER_START_HANDLE_DESCRIPTION=Left handle -#XACT: ARIA description for the slider +#XACT: ARIA description for range slider end handle RANGE_SLIDER_END_HANDLE_DESCRIPTION=Right handle #XBUT: Rating indicator tooltip text @@ -301,7 +301,7 @@ RATING_INDICATOR_TEXT=Rating Indicator #XACT: ARIA description for the segmented button SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button -#XACT: ARIA description for the slider +#XACT: ARIA description for slider handle SLIDER_ARIA_DESCRIPTION=Slider handle #XACT: ARIA announcement for the switch on diff --git a/packages/main/test/specs/RangeSlider.spec.js b/packages/main/test/specs/RangeSlider.spec.js index 2361a7d4624c..e6b0903c3c0d 100644 --- a/packages/main/test/specs/RangeSlider.spec.js +++ b/packages/main/test/specs/RangeSlider.spec.js @@ -97,7 +97,7 @@ describe("Testing Range Slider interactions", () => { rangeSlider.setProperty("endValue", 30); rangeSlider.dragAndDrop({ x: -500, y: 1 }); - + assert.strictEqual(rangeSlider.getProperty("startValue"), 0, "startValue should be 0 as the selected range has reached the start of the Range Slider"); assert.strictEqual(rangeSlider.getProperty("endValue"), 21, "endValue should be 21 and no less, the initially selected range should be preserved"); @@ -203,7 +203,7 @@ describe("Properties synchronization and normalization", () => { rangeSlider.setProperty("endValue", 300); assert.strictEqual(rangeSlider.getProperty("endValue"), 200, "value prop should always be lower than the max value"); - + rangeSlider.setProperty("startValue", 99); assert.strictEqual(rangeSlider.getProperty("startValue"), 100, "value prop should always be greater than the min value"); @@ -220,7 +220,7 @@ describe("Properties synchronization and normalization", () => { assert.strictEqual(rangeSlider.getProperty("startValue"), 14, "startValue should not be stepped to the next step (15)"); assert.strictEqual(rangeSlider.getProperty("endValue"), 24, "endValue should not be stepped to the next step (25)"); - }); + }); it("If the step property or the labelInterval are changed, the tickmarks and labels must be updated also", () => { const rangeSlider = browser.$("#range-slider-tickmarks-labels"); @@ -234,7 +234,7 @@ describe("Properties synchronization and normalization", () => { rangeSlider.setProperty("step", 2); assert.strictEqual(rangeSlider.getProperty("_labels").length, 11, "Labels must be 12 - 1 for every 2 tickmarks (and 4 current value points)"); - + rangeSlider.setProperty("labelInterval", 4); assert.strictEqual(rangeSlider.getProperty("_labels").length, 6, "Labels must be 6 - 1 for every 4 tickmarks (and 8 current value points)"); @@ -263,7 +263,66 @@ describe("Testing events", () => { }); -describe("Accessibility: Testing focus", () => { +describe("Accessibility", () => { + it("Aria attributes of the progress bar are set correctly", () => { + const rangeSlider = browser.$("#range-slider-tickmarks"); + const rangeSliderProgressBar = rangeSlider.shadow$(".ui5-slider-progress"); + const rangeSliderId = rangeSlider.getProperty("_id"); + + assert.strictEqual(rangeSliderProgressBar.getAttribute("aria-labelledby"), + `${rangeSliderId}-sliderDesc`, "aria-labelledby is set correctly"); + assert.strictEqual(rangeSliderProgressBar.getAttribute("aria-valuemin"), + `${rangeSlider.getProperty("min")}`, "aria-valuemin is set correctly"); + assert.strictEqual(rangeSliderProgressBar.getAttribute("aria-valuemax"), + `${rangeSlider.getProperty("max")}`, "aria-valuemax is set correctly"); + assert.strictEqual(rangeSliderProgressBar.getAttribute("aria-valuetext"), + `From ${rangeSlider.getProperty("startValue")} to ${rangeSlider.getProperty("endValue")}`, "aria-valuetext is set correctly"); + }); + + it("Aria attributes of the start handle are set correctly", () => { + const rangeSlider = browser.$("#range-slider-tickmarks"); + const startHandle = rangeSlider.shadow$(".ui5-slider-handle--start"); + const rangeSliderId = rangeSlider.getProperty("_id"); + + assert.strictEqual(startHandle.getAttribute("aria-labelledby"), + `${rangeSliderId}-startHandleDesc`, "aria-labelledby is set correctly"); + assert.strictEqual(startHandle.getAttribute("aria-valuemin"), + `${rangeSlider.getProperty("min")}`, "aria-valuemin is set correctly"); + assert.strictEqual(startHandle.getAttribute("aria-valuemax"), + `${rangeSlider.getProperty("max")}`, "aria-valuemax is set correctly"); + assert.strictEqual(startHandle.getAttribute("aria-valuenow"), + `${rangeSlider.getProperty("startValue")}`, "aria-valuenow is set correctly"); + }); + + it("Aria attributes of the end handle are set correctly", () => { + const rangeSlider = browser.$("#range-slider-tickmarks"); + const endHandle = rangeSlider.shadow$(".ui5-slider-handle--end"); + const rangeSliderId = rangeSlider.getProperty("_id"); + + assert.strictEqual(endHandle.getAttribute("aria-labelledby"), + `${rangeSliderId}-endHandleDesc`, "aria-labelledby is set correctly"); + assert.strictEqual(endHandle.getAttribute("aria-valuemin"), + `${rangeSlider.getProperty("min")}`, "aria-valuemin is set correctly"); + assert.strictEqual(endHandle.getAttribute("aria-valuemax"), + `${rangeSlider.getProperty("max")}`, "aria-valuemax is set correctly"); + assert.strictEqual(endHandle.getAttribute("aria-valuenow"), + `${rangeSlider.getProperty("endValue")}`, "aria-valuenow is set correctly"); + }); + + it("Aria-labelledby text is mapped correctly when values are swapped", () => { + const rangeSlider = browser.$("#range-slider-tickmarks"); + const rangeSliderId = rangeSlider.getProperty("_id"); + const startHandle = rangeSlider.shadow$(".ui5-slider-handle--start"); + const rangeSliderStartHandleSpan = rangeSlider.shadow$(`#${rangeSliderId}-startHandleDesc`); + const rangeSliderEndHandleSpan = rangeSlider.shadow$(`#${rangeSliderId}-endHandleDesc`); + + rangeSlider.setProperty("endValue", 9); + startHandle.dragAndDrop({ x: 100, y: 1 }); + + assert.strictEqual(rangeSliderStartHandleSpan.getText(), "Left handle", "Start Handle text is correct after swap"); + assert.strictEqual(rangeSliderEndHandleSpan.getText(), "Right handle", "End Handle text is correct after swap"); + }); + it("Click anywhere in the Range Slider should focus the closest handle", () => { browser.url("http://localhost:8080/test-resources/pages/RangeSlider.html"); @@ -321,7 +380,7 @@ describe("Accessibility: Testing focus", () => { assert.strictEqual(rangeSlider.isFocused(), true, "Range Slider component is focused"); assert.strictEqual($(innerFocusedElement).getAttribute("class"), rangeSliderSelection.getAttribute("class"), "Range Slider progress tracker has the shadowDom focus"); }); - + it("When progress bar has the focus, 'Tab' should move the focus to the first handle", () => { const rangeSlider = browser.$("#basic-range-slider"); const rangeSliderStartHandle = rangeSlider.shadow$(".ui5-slider-handle--start"); diff --git a/packages/main/test/specs/Slider.spec.js b/packages/main/test/specs/Slider.spec.js index c4dcdaa7f010..59bda5e6cf2a 100644 --- a/packages/main/test/specs/Slider.spec.js +++ b/packages/main/test/specs/Slider.spec.js @@ -96,7 +96,7 @@ describe("Properties synchronization and normalization", () => { slider.setProperty("step", 2); assert.strictEqual(slider.getProperty("_labels").length, 11, "Labels must be 12 - 1 for every 2 tickmarks (and 4 current value points)"); - + slider.setProperty("labelInterval", 4); assert.strictEqual(slider.getProperty("_labels").length, 6, "Labels must be 6 - 1 for every 4 tickmarks (and 8 current value points)"); @@ -185,7 +185,22 @@ describe("Testing events", () => { }); }); -describe("Accessibility: Testing focus", () => { +describe("Accessibility", () => { + it("Aria attributes are set correctly", () => { + const slider = browser.$("#basic-slider"); + const sliderHandle = slider.shadow$(".ui5-slider-handle"); + const sliderId = slider.getProperty("_id"); + + assert.strictEqual(sliderHandle.getAttribute("aria-labelledby"), + `${sliderId}-sliderDesc`, "aria-labelledby is set correctly"); + assert.strictEqual(sliderHandle.getAttribute("aria-valuemin"), + `${slider.getProperty("min")}`, "aria-valuemin is set correctly"); + assert.strictEqual(sliderHandle.getAttribute("aria-valuemax"), + `${slider.getProperty("max")}`, "aria-valuemax is set correctly"); + assert.strictEqual(sliderHandle.getAttribute("aria-valuenow"), + `${slider.getProperty("value")}`, "aria-valuenow is set correctly"); + }); + it("Click anywhere in the Slider should focus the Slider's handle", () => { browser.url("http://localhost:8080/test-resources/pages/Slider.html"); @@ -335,7 +350,7 @@ describe("Accessibility: Testing keyboard handling", () => { browser.keys(numpadSubtract); assert.strictEqual(slider.getProperty("value"), 0, "Value is decreased"); - }); + }); it("An 'End' key press should increase the value of the slider to its max", () => { const slider = browser.$("#basic-slider-with-tooltip"); From 6a2d183f87c1ac7d82254ba44a048fdeee34e7a4 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Mon, 25 Jan 2021 14:15:56 +0200 Subject: [PATCH 7/9] fix exception in RTL --- packages/main/src/RangeSlider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/RangeSlider.js b/packages/main/src/RangeSlider.js index c1f76408e984..daecc657c42c 100644 --- a/packages/main/src/RangeSlider.js +++ b/packages/main/src/RangeSlider.js @@ -698,15 +698,15 @@ class RangeSlider extends SliderBase { } get _startHandle() { - return this.getDomRef().querySelector(".ui5-slider-handle--start"); + return this.shadowRoot.querySelector(".ui5-slider-handle--start"); } get _endHandle() { - return this.getDomRef().querySelector(".ui5-slider-handle--end"); + return this.shadowRoot.querySelector(".ui5-slider-handle--end"); } get _progressBar() { - return this.getDomRef().querySelector(".ui5-slider-progress"); + return this.shadowRoot.querySelector(".ui5-slider-progress"); } get styles() { From 0254656bf16f3948872db7ef5abcea56372372ef Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Mon, 25 Jan 2021 15:14:35 +0200 Subject: [PATCH 8/9] disabled sliders are no longer focusable --- packages/main/src/RangeSlider.hbs | 6 +++--- packages/main/src/Slider.hbs | 2 +- packages/main/src/SliderBase.js | 9 +++++++++ 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs index e028fc9ae515..152061156ba8 100644 --- a/packages/main/src/RangeSlider.hbs +++ b/packages/main/src/RangeSlider.hbs @@ -10,7 +10,7 @@ @focusin="{{_onfocusin}}" @focusout="{{_onfocusout}}" role="slider" - tabindex="0" + tabindex="{{tabIndex}}" aria-orientation="horizontal" aria-valuemin="{{min}}" aria-valuemax="{{max}}" @@ -27,7 +27,7 @@ @focusin="{{_onfocusin}}" @focusout="{{_onfocusout}}" role="slider" - tabindex="0" + tabindex="{{tabIndex}}" aria-orientation="horizontal" aria-valuemin="{{min}}" aria-valuemax="{{max}}" @@ -47,7 +47,7 @@ @focusin="{{_onfocusin}}" @focusout="{{_onfocusout}}" role="slider" - tabindex="0" + tabindex="{{tabIndex}}" aria-orientation="horizontal" aria-valuemin="{{min}}" aria-valuemax="{{max}}" diff --git a/packages/main/src/Slider.hbs b/packages/main/src/Slider.hbs index 5e741f381e84..79413a5a93e9 100644 --- a/packages/main/src/Slider.hbs +++ b/packages/main/src/Slider.hbs @@ -17,7 +17,7 @@ @focusout="{{_onfocusout}}" @focusin="{{_onfocusin}}" role="slider" - tabindex="0" + tabindex="{{tabIndex}}" aria-orientation="horizontal" aria-valuemin="{{min}}" aria-valuemax="{{max}}" diff --git a/packages/main/src/SliderBase.js b/packages/main/src/SliderBase.js index 581c73ea43c9..7b7a4869c26e 100644 --- a/packages/main/src/SliderBase.js +++ b/packages/main/src/SliderBase.js @@ -114,6 +114,11 @@ const metadata = { _hiddenTickmarks: { type: Boolean, }, + _tabIndex: { + type: String, + defaultValue: "0", + noAttribute: true, + }, }, events: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */ { /** @@ -832,6 +837,10 @@ class SliderBase extends UI5Element { get _effectiveMax() { return Math.max(this.min, this.max); } + + get tabIndex() { + return this.disabled ? "-1" : this._tabIndex; + } } export default SliderBase; From bbb6aa4d84cbb7cc9ab98141cf925429c3063b08 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Mon, 25 Jan 2021 15:28:06 +0200 Subject: [PATCH 9/9] remove unnecessary private property --- packages/main/src/SliderBase.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/main/src/SliderBase.js b/packages/main/src/SliderBase.js index 7b7a4869c26e..907936c1c4ad 100644 --- a/packages/main/src/SliderBase.js +++ b/packages/main/src/SliderBase.js @@ -114,11 +114,6 @@ const metadata = { _hiddenTickmarks: { type: Boolean, }, - _tabIndex: { - type: String, - defaultValue: "0", - noAttribute: true, - }, }, events: /** @lends sap.ui.webcomponents.main.SliderBase.prototype */ { /** @@ -839,7 +834,7 @@ class SliderBase extends UI5Element { } get tabIndex() { - return this.disabled ? "-1" : this._tabIndex; + return this.disabled ? "-1" : "0"; } }