From 2e779b4ae756cc16652916db1c80a2a405c5865f Mon Sep 17 00:00:00 2001 From: Naydenov Date: Tue, 15 Dec 2020 16:43:34 +0200 Subject: [PATCH 1/4] fix(ui5-select): correct role and screen reader speech out --- packages/main/src/Select.hbs | 6 +- packages/main/test/pages/Select.html | 180 ++------------------------- 2 files changed, 12 insertions(+), 174 deletions(-) diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 2d62e08e3af5..2766fd1fff1f 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -3,10 +3,10 @@ dir="{{effectiveDir}}" tabindex="{{tabIndex}}" id="{{_id}}-select" - role="button" + role="combobox" + value="{{_text}}" aria-haspopup="listbox" aria-label="{{ariaLabelText}}" - aria-labelledby="{{_id}}-label" aria-describedby="{{valueStateTextId}}" aria-disabled="{{isDisabled}}" aria-required="{{required}}" @@ -18,7 +18,7 @@ @click="{{_toggleRespPopover}}" >
- {{_text}} + {{_text}}
- turn lights - Add new Items - Restore Items - click - - -

Content size

- - +

Select without aria-label and aria-labelledby

+ Cozy Compact Condensed - -

Error Select

- +

Select with aria-label

+ Cozy Compact Condensed - -

Warning Select

- - -

Disabled Select

- - -

Input with suggestions

- - -

Selection not cycling

- - Opt1 - Opt2 - Opt3 - - - - Opt1 - Opt2 - Opt3 - - - - Cozy +

Select with aria-labelledby

+ Test aria-labelledby text + + Cozy Compact - Condensed - - - - Banana - Orange - Watermelon + Condensed - -

Change event counter holder

- - -
-

Select aria-label and aria-labelledby

- info text -
- - First - Second - Third - - - - One - Two - Three - -
-
- -
-

Select in Compact

-
- - Cozy - Compact - Condensed - -
-
- From fddebb6ce8c159703c628a95960befd80c2694a1 Mon Sep 17 00:00:00 2001 From: Naydenov Date: Wed, 16 Dec 2020 17:33:24 +0200 Subject: [PATCH 2/4] fix(ui5-select): correct role and screen reader speech out --- packages/main/test/pages/Select.html | 180 +++++++++++++++++++++++++-- 1 file changed, 171 insertions(+), 9 deletions(-) diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index a0bc5eeab803..26b28a3ef2bc 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -17,25 +17,187 @@ -

Select without aria-label and aria-labelledby

- + turn lights + Add new Items + Restore Items + click + + +

Content size

+ + Cozy Compact Condensed -

Select with aria-label

- + +

Error Select

+ Cozy Compact Condensed -

Select with aria-labelledby

- Test aria-labelledby text - - Cozy + +

Warning Select

+ + +

Disabled Select

+ + +

Input with suggestions

+ + +

Selection not cycling

+ + Opt1 + Opt2 + Opt3 + + + + Opt1 + Opt2 + Opt3 + + + + Cozy Compact - Condensed + Condensed + + + + Banana + Orange + Watermelon + +

Change event counter holder

+ + +
+

Select aria-label and aria-labelledby

+ info text +
+ + First + Second + Third + + + + One + Two + Three + +
+
+ +
+

Select in Compact

+
+ + Cozy + Compact + Condensed + +
+
+ From 7dead1f5df1a189d2322fc00ee35a1d7ffbbe5bf Mon Sep 17 00:00:00 2001 From: Naydenov Date: Fri, 18 Dec 2020 14:09:30 +0200 Subject: [PATCH 3/4] align to the new aria-standanrd (POC) --- packages/main/src/Select.hbs | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 2766fd1fff1f..7fc566cc5c6b 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -1,26 +1,31 @@
{{_text}}
+
+ {{_text}} +
+ Date: Mon, 21 Dec 2020 18:28:58 +0200 Subject: [PATCH 4/4] align to new aria standard (POC) --- packages/main/src/Select.hbs | 9 ++-- packages/main/src/Select.js | 16 +++++++ packages/main/src/themes/Select.css | 15 +++--- packages/main/test/specs/Select.spec.js | 64 ++++++++++++++++++------- 4 files changed, 76 insertions(+), 28 deletions(-) diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 7fc566cc5c6b..1656f8c4dd88 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -4,12 +4,7 @@ id="{{_id}}-select" @click="{{_toggleRespPopover}}" > -
- {{_text}} -
- -
+ + { it("fires change on selection", () => { const select = $("#mySelect"); - const selectText = browser.$("#mySelect").shadow$("ui5-label"); + const selectText = browser.$("#mySelect").shadow$(".ui5-select-label-root"); const inputResult = browser.$("#inputResult").shadow$("input"); const EXPECTED_SELECTION_TEXT = "Cozy"; @@ -34,7 +34,7 @@ describe("Select general interaction", () => { it("fires change on selection with keyboard handling", () => { const select = $("#mySelect2").shadow$(".ui5-select-root"); - const selectText = browser.$("#mySelect2").shadow$("ui5-label"); + const selectText = browser.$("#mySelect2").shadow$(".ui5-select-label-root"); const inputResult = browser.$("#inputResult"); const EXPECTED_SELECTION_TEXT1 = "Compact"; const EXPECTED_SELECTION_TEXT2 = "Condensed"; @@ -57,7 +57,7 @@ describe("Select general interaction", () => { it("changes selection while closed with Arrow Up/Down", () => { const inputResult = browser.$("#inputResult").shadow$("input"); const select = $("#mySelect2"); - const selectText = browser.$("#mySelect2").shadow$("ui5-label"); + const selectText = browser.$("#mySelect2").shadow$(".ui5-select-label-root"); const EXPECTED_SELECTION_TEXT1 = "Compact"; const EXPECTED_SELECTION_TEXT2 = "Condensed"; @@ -74,6 +74,39 @@ describe("Select general interaction", () => { assert.strictEqual(inputResult.getProperty("value"), "5", "Change event should have fired twice"); }); + it("changes selection sync with selection announcement", () => { + const btn = $("#myBtn2"); + const inputResult = browser.$("#inputResult").shadow$("input"); + const select = $("#mySelect2"); + const selectId = select.getProperty("_id") + const selectText = browser.$("#mySelect2").shadow$(".ui5-select-label-root"); + const selectionText = browser.$("#mySelect2").shadow$(`#${selectId}-selectionText`); + const EXPECTED_SELECTION_TEXT1 = "Compact"; + const EXPECTED_SELECTION_TEXT2 = "Condensed"; + + select.click(); + select.keys("Escape"); + + assert.strictEqual(selectionText.getHTML(false), "", "Selection announcement text should be clear if there is no interaction"); + + select.keys("ArrowUp"); + assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT1), "Arrow Up should change selected item"); + assert.strictEqual(selectionText.getHTML(false), EXPECTED_SELECTION_TEXT1, "Selection announcement text should be equalt to the current selected item's text"); + + select.click(); + select.keys("Escape"); + assert.strictEqual(selectionText.getHTML(false), "", "Selection announcement text should be cleared if the picker is opened"); + + select.keys("ArrowDown"); + assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2), "Arrow Up should change selected item"); + assert.strictEqual(selectionText.getHTML(false), EXPECTED_SELECTION_TEXT2, "Selection announcement text should be equalt to the current selected item's text"); + + btn.click(); + assert.strictEqual(selectionText.getHTML(false), "", "Selection announcement text should be cleared on focusout"); + + assert.strictEqual(inputResult.getProperty("value"), "7", "Change event should have fired twice"); + }); + it("changes selection on Tab", () => { const select = browser.$("#keyboardHandling"); const EXPECTED_SELECTION_TEXT = "Banana"; @@ -84,7 +117,7 @@ describe("Select general interaction", () => { select.keys("ArrowUp"); select.keys("Tab"); - const selectText = select.shadow$("ui5-label"); + const selectText = select.shadow$(".ui5-select-label-root"); assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT) > -1, "Arrow Up should change selected item"); @@ -105,7 +138,7 @@ describe("Select general interaction", () => { select.keys("ArrowDown"); browser.keys(["Shift", "Tab"]); - const selectText = select.shadow$("ui5-label"); + const selectText = select.shadow$(".ui5-select-label-root"); assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT) > -1, "Arrow Down should change selected item"); @@ -119,7 +152,7 @@ describe("Select general interaction", () => { it("tests selection does not cycle with ArrowDown", () => { const select = $("#selectionNotCycling"); const EXPECTED_SELECTION_TEXT = "Opt3"; - const selectOptionText = select.shadow$("ui5-label"); + const selectOptionText = select.shadow$(".ui5-select-label-root"); select.click(); assert.ok(selectOptionText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT) > -1, "Selected option text is " + EXPECTED_SELECTION_TEXT); @@ -135,7 +168,7 @@ describe("Select general interaction", () => { it("tests selection does not cycle with ArrowUp", () => { const select = $("#selectionNotCycling2"); const EXPECTED_SELECTION_TEXT = "Opt1"; - const selectOptionText = select.shadow$("ui5-label"); + const selectOptionText = select.shadow$(".ui5-select-label-root"); select.click(); assert.ok(selectOptionText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT) > -1, "Selected option text is " + EXPECTED_SELECTION_TEXT); @@ -223,7 +256,7 @@ describe("Select general interaction", () => { it("reverts value before open after clicking on escape", () => { const select = $("#mySelect"); - const selectText = browser.$("#mySelect").shadow$("ui5-label").getHTML(false); + const selectText = browser.$("#mySelect").shadow$(".ui5-select-label-root").getHTML(false); const inputResult = browser.$("#inputResult").shadow$("input"); select.click(); @@ -231,10 +264,10 @@ describe("Select general interaction", () => { select.keys("Escape"); const selectedOption = browser.$("#mySelect ui5-option[selected]"); - const selectTextAfterEscape = browser.$("#mySelect").shadow$("ui5-label").getHTML(false); + const selectTextAfterEscape = browser.$("#mySelect").shadow$(".ui5-select-label-root").getHTML(false); assert.ok(selectedOption.getProperty("selected"), "Initially selected item should remain selected"); - assert.strictEqual(inputResult.getProperty("value"), "5", "Change event should not be fired"); + assert.strictEqual(inputResult.getProperty("value"), "7", "Change event should not be fired"); assert.strictEqual(selectTextAfterEscape, selectText, "Initially selected item should remain selected"); }); @@ -250,7 +283,7 @@ describe("Select general interaction", () => { // focus out select btn.click(); - assert.strictEqual(inputResult.getProperty("value"), "6", "Change event should be fired"); + assert.strictEqual(inputResult.getProperty("value"), "8", "Change event should be fired"); }); it("fires change event after selecting a previewed item", () => { @@ -268,12 +301,12 @@ describe("Select general interaction", () => { firstItem.click(); - assert.strictEqual(inputResult.getProperty("value"), "7", "Change event should be fired"); + assert.strictEqual(inputResult.getProperty("value"), "9", "Change event should be fired"); }); it("tests ESC on closed picker", () => { const select = $("#mySelectEsc"); - const selectText = browser.$("#mySelectEsc").shadow$("ui5-label"); + const selectText = browser.$("#mySelectEsc").shadow$(".ui5-select-label-root"); const EXPECTED_SELECTION_TEXT = "Cozy"; const EXPECTED_SELECTION_TEXT2 = "Condensed"; @@ -294,10 +327,9 @@ describe("Select general interaction", () => { assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2) !== -1, "Select label is correct."); }); - it("Tests aria-label and aria-labelledby", () => { - const select1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-select-root"); - const select2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-select-root"); + const select1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-select-label-root"); + const select2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-select-label-root"); const EXPECTED_ARIA_LABEL1 = "Hello World"; const EXPECTED_ARIA_LABEL2 = "info text";