feat(vwc-helper-message): iss 578 a11y for helper (#586)

* issue #578: adding a11y marks and relevant ID * issue #578: fixing the tests * issue #578: refactoring approach * fixing some Storybook inconsistency * fixing typo
Vonage · Jan 19, 2021 · 5b49f3c · 5b49f3c
1 parent fd84e36
commit 5b49f3c
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 13 deletions.
diff --git a/__snapshots__/file picker.md b/__snapshots__/file picker.md
@@ -3,7 +3,10 @@
 #### `should have the expected internal contents`
 
 ```html
-<label class="wrapper">
+<label
+  aria-describedby="helper"
+  class="wrapper"
+>
   <div class="content drop-zone part">
     <slot name="dd-hint">
       <span class="dd-hint">

diff --git a/__snapshots__/linear progress.md b/__snapshots__/linear progress.md
@@ -9,21 +9,14 @@
   aria-valuenow="0"
   class="mdc-linear-progress mdc-linear-progress--animation-ready"
   role="progressbar"
-  style=""
 >
   <div class="mdc-linear-progress__buffer">
-    <div
-      class="mdc-linear-progress__buffer-bar"
-      style="flex-basis: 100%;"
-    >
+    <div class="mdc-linear-progress__buffer-bar">
     </div>
     <div class="mdc-linear-progress__buffer-dots">
     </div>
   </div>
-  <div
-    class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"
-    style="transform: scaleX(0);"
-  >
+  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
     <span class="mdc-linear-progress__bar-inner">
     </span>
   </div>

diff --git a/components/file-picker/src/vwc-file-picker.ts b/components/file-picker/src/vwc-file-picker.ts
@@ -70,7 +70,7 @@ export class VWCFilePicker extends LitElement {
 
 	protected render(): TemplateResult {
 		return html`
-			<label class="wrapper">
+			<label class="wrapper" aria-describedby="helper">
 				${this.renderHeader()}
 				<div class="content drop-zone part">
 					<slot name="dd-hint">${this.renderDragNDropHint()}</slot>
@@ -99,7 +99,7 @@ export class VWCFilePicker extends LitElement {
 		const isError = !!this.validationMessage;
 		const text = this.validationMessage || this.helper || '';
 		if (text) {
-			return html`<vwc-helper-message ?is-error="${isError}"
+			return html`<vwc-helper-message id="helper" ?is-error="${isError}"
 				>${text}</vwc-helper-message
 			>`;
 		} else {

diff --git a/components/note/stories/note-introduction.config.mjs b/components/note/stories/note-introduction.config.mjs
@@ -2,7 +2,7 @@ export default {
 	sourcePath: '../readme.md',
 	outputName: 'note-introduction',
 	story: {
-		title: 'Components/Composite/Note',
+		title: 'Components/Composite/Note/Introduction',
 		name: 'Introduction',
 		parameters: {
 			options: {

diff --git a/components/select/src/vwc-select.ts b/components/select/src/vwc-select.ts
@@ -69,6 +69,7 @@ export class VWCSelect extends MWCSelect {
 		const text = isError ? this.validationMessage : this.helper;
 
 		return html`<vwc-helper-message
+			id="helper-text"
 			class="helper-message"
 			?disabled="${this.disabled}"
 			?is-error="${isError}"

diff --git a/components/textarea/src/vwc-textarea.ts b/components/textarea/src/vwc-textarea.ts
@@ -62,6 +62,7 @@ export class VWCTextArea extends MWCTextArea {
 		const text = isError ? this.validationMessage : this.helper;
 
 		return html`<vwc-helper-message
+			id="helper-text"
 			class="helper-message"
 			?disabled="${this.disabled}"
 			?is-error="${isError}"

diff --git a/components/textfield/src/vwc-textfield.ts b/components/textfield/src/vwc-textfield.ts
@@ -101,6 +101,7 @@ export class VWCTextField extends MWCTextField {
 		const text = isError ? this.validationMessage : this.helper;
 
 		return html`<vwc-helper-message
+			id="helper-text"
 			class="helper-message"
 			?disabled="${this.disabled}"
 			?is-error="${isError}"