feat(ui5-select): implement accessibility spec (#1485)

SAP · Apr 22, 2020 · ede3635 · ede3635
1 parent f337d47
commit ede3635
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
@@ -1,15 +1,21 @@
 <div
 	class="ui5-select-root"
-	tabindex="{{tabIndex}}"
 	dir="{{dir}}"
+	tabindex="{{tabIndex}}"
+	id="{{_id}}-select"
+	role="button"
+	aria-haspopup="listbox"
+	aria-labelledby="{{_id}}-label"
+	aria-describedby="{{valueStateTextId}}"
+	aria-disabled="{{isDisabled}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@click="{{_toggleRespPopover}}"
 >
 	<div class="ui5-select-label-root">
-		<ui5-label>{{_text}}</ui5-label>
+		<ui5-label id="{{_id}}-label" for="{{_id}}-select">{{_text}}</ui5-label>
 	</div>
 
 	<ui5-icon
@@ -19,5 +25,8 @@
 		dir="{{dir}}"
 	></ui5-icon>
 
+	{{#if hasValueState}}
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+	{{/if}}
 	<slot name="formSupport"></slot>
 </div>
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
@@ -15,6 +15,10 @@ import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
 import {
+	VALUE_STATE_SUCCESS,
+	VALUE_STATE_INFORMATION,
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 import Label from "./Label.js";
@@ -424,6 +428,33 @@ class Select extends UI5Element {
 		}
 	}
 
+	get valueStateTextMappings() {
+		const i18nBundle = this.i18nBundle;
+
+		return {
+			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+		};
+	}
+
+	get valueStateText() {
+		return this.valueStateTextMappings[this.valueState];
+	}
+
+	get hasValueState() {
+		return this.valueState !== ValueState.None;
+	}
+
+	get valueStateTextId() {
+		return this.hasValueState ? `${this._id}-valueStateDesc` : undefined;
+	}
+
+	get isDisabled() {
+		return this.disabled || undefined;
+	}
+
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}