chore(ui5-combobox, ui5-multi-combobox, ui5-wizard, ui5-multiinput, u…

…i5-slider, ui5-range-slider): accessibility improvements (#9649) chore: accessibility improvements Co-authored-by: Elena Stoyanova <e.nikolova@sap.com>
SAP · Aug 8, 2024 · 3484699 · 3484699
1 parent fe522a9
commit 3484699
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 5 deletions.
diff --git a/packages/fiori/src/WizardTab.hbs b/packages/fiori/src/WizardTab.hbs
@@ -12,7 +12,7 @@
 	<div class="ui5-wiz-step-main">
 		<div class="ui5-wiz-step-icon-circle">
 			{{#if icon}}
-				<ui5-icon class="ui5-wiz-step-icon" name="{{icon}}"></ui5-icon>
+				<ui5-icon class="ui5-wiz-step-icon" mode="Decorative" name="{{icon}}"></ui5-icon>
 			{{else}}
 				<span class="ui5-wiz-step-number">{{number}}</span>
 			{{/if}}

diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
@@ -24,6 +24,7 @@
 		aria-describedby="value-state-description"
 		aria-label="{{ariaLabelText}}"
 		aria-required="{{required}}"
+		aria-controls="{{responsivePopoverId}}"
 		autocomplete="off"
 		data-sap-focus-ref
 	/>

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -1351,6 +1351,10 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return ComboBox.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
 	}
 
+	get responsivePopoverId() {
+		return `${this._id}-popover`;
+	}
+
 	static async onDefine() {
 		ComboBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -13,6 +13,7 @@
 	@keydown={{_handlePopoverKeydown}}
 	@focusout={{_handlePopoverFocusout}}
 	accessible-name="{{_popupLabel}}"
+	id="{{responsivePopoverId}}"
 	.open={{open}}
 	.opener={{this}}
 >

diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
@@ -76,6 +76,7 @@
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		aria-controls="{{responsivePopoverId}}"
 		autocomplete="off"
 		data-sap-focus-ref
 	/>

diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -1995,6 +1995,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		return MultiComboBox.i18nBundle.getText(COMBOBOX_AVAILABLE_OPTIONS);
 	}
 
+	get responsivePopoverId() {
+		return `${this._id}-popover`;
+	}
+
 	get classes(): ClassMap {
 		return {
 			popover: {

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -2,6 +2,7 @@
 	placement="Bottom"
 	horizontal-align="Start"
 	class="{{classes.popover}}"
+	id="{{responsivePopoverId}}"
 	hide-arrow
 	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"

diff --git a/packages/main/src/MultiInput.hbs b/packages/main/src/MultiInput.hbs
@@ -27,6 +27,7 @@
 			@mouseup={{valueHelpMouseUp}}
 			class="inputIcon"
 			name="value-help"
+			accessible-name="{{valueHelpLabel}}"
 		></ui5-icon>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
@@ -16,7 +16,7 @@ import {
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
+import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./generated/templates/MultiInputTemplate.lit.js";
 import styles from "./generated/themes/MultiInput.css.js";
@@ -394,6 +394,10 @@ class MultiInput extends Input implements IFormInputElement {
 		};
 	}
 
+	get valueHelpLabel() {
+		return MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP_LABEL);
+	}
+
 	get ariaRoleDescription() {
 		return MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
 	}

diff --git a/packages/main/src/RangeSlider.hbs b/packages/main/src/RangeSlider.hbs
@@ -43,7 +43,7 @@
 		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -66,7 +66,7 @@
 		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">

diff --git a/packages/main/src/Slider.hbs b/packages/main/src/Slider.hbs
@@ -32,7 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
-			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+			<ui5-icon mode="Decorative" "direction-arrows" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -279,6 +279,9 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=Multi Value Input
 #XFLD: Token number indicator which is used to show more tokens
 MULTIINPUT_SHOW_MORE_TOKENS={0} more
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 

diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
@@ -927,6 +927,18 @@ describe("Accessibility", async () => {
 
 		assert.strictEqual(await innerInput.getAttribute("aria-haspopup"), "dialog", "Should render aria-haspopup attribute with value 'dialog'");
 	});
+
+	it("Should apply aria-controls pointing to the responsive popover", async () => {
+		await browser.url(`test/pages/ComboBox.html`);
+
+		const combo = await browser.$("#combo");
+		const innerInput = await combo.shadow$("input");
+		const popover = await combo.shadow$("ui5-responsive-popover");
+
+		await combo.scrollIntoView();
+
+		assert.strictEqual(await innerInput.getAttribute("aria-controls"), await popover.getAttribute("id"), "aria-controls attribute is correct.");
+	});
 });
 
 describe("Keyboard navigation", async () => {

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1778,6 +1778,16 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(await innerInput.getAttribute("aria-label"), await mcbLabel.getHTML(false), "aria-label attribute is correct.");
 		});
 
+		it("Should apply aria-controls pointing to the responsive popover", async () => {
+			const mcb = await browser.$("#mcb-predefined-value");
+			const innerInput = await mcb.shadow$("input");
+			const popover = await mcb.shadow$("ui5-responsive-popover");
+
+			await mcb.scrollIntoView();
+
+			assert.strictEqual(await innerInput.getAttribute("aria-controls"), await popover.getAttribute("id"), "aria-controls attribute is correct.");
+		});
+
 		it("Should render aria-haspopup attribute with value 'dialog'", async () => {
 			const mcb = await browser.$("#mcb-compact");
 			const innerInput = await mcb.shadow$("input");