From ede363509b2e11ca65707355a5f9d780a8d29929 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Wed, 22 Apr 2020 12:23:51 +0300
Subject: [PATCH] feat(ui5-select): implement accessibility spec (#1485)

---
 packages/main/src/Select.hbs | 13 +++++++++++--
 packages/main/src/Select.js  | 31 +++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
index 19e577ac3470..44f4776b35ec 100644
--- a/packages/main/src/Select.hbs
+++ b/packages/main/src/Select.hbs
@@ -1,7 +1,13 @@
 <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}}"
@@ -9,7 +15,7 @@
 	@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
index 44d7b950fd9d..790087604512 100644
--- 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);
 	}