feat(TextField): add maxlength warning, fix width

Author: hobbitronics

components/mdc/TextInput/TextField.svelte

@@ -2,7 +2,7 @@
 <script>
 import { MDCTextField } from '@material/textfield'
 import { generateRandomID } from '../../../random'
-import { onMount } from 'svelte'
+import { afterUpdate, onMount } from 'svelte'
 
 export let label = ''
 export let value = ''
@@ -17,9 +17,9 @@ const labelID = generateRandomID('text-label-')
 
 let element = {}
 let mdcTextField = {}
+let width = ''
 
 $: mdcTextField.value = value
-$: width = `${element.offsetWidth}px`
 $: hasReachedMaxLength = maxlength && value.length >= maxlength
 $: error = hasReachedMaxLength
 $: showCounter = maxlength && value.length / maxlength > 0.85
@@ -29,6 +29,8 @@ onMount(() => {
   return () => mdcTextField.destroy()
 })
 
+afterUpdate(() => (width = `${element.offsetWidth}px`))
+
 const focus = (node) => autofocus && node.focus()
 </script>
 
@@ -41,20 +43,13 @@ const focus = (node) => autofocus && node.focus()
 }
 .required {
   color: var(--mdc-required-input, var(--mdc-theme-status-error));
-  font-size: small;
-  margin-left: 1rem;
-  margin-top: 0.2rem;
 }
 .label-margin {
   margin-left: 1.1rem;
 }
 .mdc-text-field--label-floating .mdc-floating-label {
   margin-left: 0;
 }
-.mdc-text-field-helper-line {
-  float: right;
-  padding-right: 1rem;
-}
 </style>
 
 <label
@@ -69,6 +64,8 @@ const focus = (node) => autofocus && node.focus()
     type="text"
     class="mdc-text-field__input"
     aria-labelledby={labelID}
+    aria-controls="{labelID}-helper-id"
+    aria-describedby="{labelID}-helper-id"
     bind:value
     use:focus
     on:blur
@@ -98,15 +95,18 @@ const focus = (node) => autofocus && node.focus()
     <span class="mdc-notched-outline__trailing" />
   </span>
 </label>
-<div style="width: {width};">
-  {#if required && !value}
-    <div class="required d-inline">*Required</div>
-  {/if}
+<div class="mdc-text-field-helper-line" style="width: {width};">
+  <div class="mdc-text-field-helper-text" id="{labelID}-helper-id" aria-hidden="true">
+    {#if required && !value}
+      <span class="required">*Required</span>
+    {/if}
+    {#if showCounter}
+      <span class="error">Maximum {maxlength} characters</span>
+    {/if}
+  </div>
   {#if showCounter}
-    <div class="mdc-text-field-helper-line">
-      <div class="mdc-text-field-character-counter" class:error>
-        {value.length} / {maxlength}
-      </div>
+    <div class="mdc-text-field-character-counter" class:error>
+      {value.length} / {maxlength}
     </div>
   {/if}
 </div>