issue #627: fixing select dense no label and some a11y issues

Vonage · Feb 2, 2021 · e13a8e2 · e13a8e2
1 parent 7cdf9ff
commit e13a8e2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 23 deletions.
diff --git a/components/select/src/vwc-select-coupling.scss b/components/select/src/vwc-select-coupling.scss
@@ -10,10 +10,6 @@
 	.mdc-floating-label--float-above {
 		@include typography.typography-mdc-coupling('subtitle1', 'caption');
 	}
-
-	.mdc-select-helper-text {
-		@include typography.typography-mdc-coupling('caption', 'caption');
-	}
 }
 
 :host([dense]) {

diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss
@@ -26,9 +26,15 @@ $vvd-select-size-block: --vvd-select-size-block;
 
   --mdc-shape-small: var(--border-radius);
 
+	#{$vvd-select-size-block}: 48px;
+
 	display: inline-flex;
 	flex-direction: column;
 	font-stretch: var(--mdc-typography-subtitle1-font-stretch); // ! this was supposed to be set by MDC
+
+  .mdc-select__selected-text {
+    padding: 22px 0 6px;
+  }
 }
 
 :host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) {
@@ -57,18 +63,11 @@ $vvd-select-size-block: --vvd-select-size-block;
 
 :host([dense]) {
   #{$vvd-select-size-block}: 40px;
-}
+	padding-top: 24px;
 
-:host(:not([dense])) {
-  #{$vvd-select-size-block}: 48px;
-
-  .mdc-select__selected-text {
-    padding: 22px 0 6px;
+	.mdc-select__selected-text {
+    padding: 0;
   }
-}
-
-:host([dense][label]:not([label=''])) {
-  padding-top: 24px;
 
   .mdc-select {
     .mdc-floating-label {

diff --git a/components/select/src/vwc-select.ts b/components/select/src/vwc-select.ts
@@ -46,20 +46,38 @@ export class VWCSelect extends MWCSelect {
 	@property({ type: String, reflect: true })
 	name: string | undefined;
 
+	connectedCallback(): void {
+		super.connectedCallback();
+		if (!this.hasAttribute('outlined')) {
+			this.outlined = true;
+		}
+	}
+
 	async firstUpdated(): Promise<void> {
 		await super.firstUpdated();
 		this.replaceIcon();
 		associateWithForm(this, this.formElement);
 		handleAutofocus(this);
 	}
 
-	protected updated(changedProperties: PropertyValues): void {
-		super.updated(changedProperties);
+	protected update(changedProperties: PropertyValues): void {
+		super.update(changedProperties);
 		if (this.shape === 'pill') {
 			this.dense = true;
 		}
 	}
 
+	protected updated(changedProperties: PropertyValues): void {
+		super.updated(changedProperties);
+		const selectedText = this.shadowRoot?.querySelector(
+			'.mdc-select__selected-text'
+		);
+		if (selectedText) {
+			selectedText.setAttribute('aria-label', 'current selection');
+			selectedText.setAttribute('role', 'textbox');
+		}
+	}
+
 	protected renderHelperText(): TemplateResult | string {
 		if (!this.shouldRenderHelperText) {
 			return '';

diff --git a/components/select/stories/select.stories.js b/components/select/stories/select.stories.js
@@ -24,22 +24,25 @@ const Template = (args) => html`
 	</vwc-select>`;
 
 export const Default = Template.bind({});
-Default.args = { outlined: '', label: 'VWC Select', helper: 'Helper Text' };
+Default.args = { label: 'VWC Select', helper: 'Helper Text' };
 
 export const Dense = Template.bind({});
-Dense.args = { dense: '', outlined: '', label: 'VWC Select' };
+Dense.args = { dense: '', label: 'VWC Select' };
 
-export const PillShape = Template.bind({});
-PillShape.args = { shape: 'pill', dense: '', outlined: '' };
+export const DenseNoLabel = Template.bind({});
+DenseNoLabel.args = { dense: '' };
+
+export const PillAutoDense = Template.bind({});
+PillAutoDense.args = { shape: 'pill', label: 'VWC Select' };
 
 export const Disabled = Template.bind({});
-Disabled.args = { disabled: '', outlined: '', label: 'VWC Select', helper: 'Helper Text' };
+Disabled.args = { disabled: '', label: 'VWC Select', helper: 'Helper Text' };
 
 export const Required = Template.bind({});
-Required.args = { required: '', outlined: '', label: 'VWC Select', helper: 'Select your preference', validationMessage: 'This Field is Required' };
+Required.args = { required: '', label: 'VWC Select', helper: 'Select your preference', validationMessage: 'This Field is Required' };
 
 export const Autofocus = Template.bind({});
-Autofocus.args = { outlined: '', label: 'VWC Select', helper: 'Select your preference', autofocus: true };
+Autofocus.args = { label: 'VWC Select', helper: 'Select your preference', autofocus: true };
 
 function onSelected(e) {
 	console.log(e);