fix(polyfill): change aria-descrbedby to aria-labelledby

Author: calebdwilliams

Diff for: src/element-internals.js

@@ -68,6 +68,7 @@ class ElementInternals {
   }
 
   setValidity(validityChanges, validationMessage) {
+    const ref = refMap.get(this);
     if (!validityChanges) {
       throw new TypeError('Failed to execute \'setValidity\' on \'ElementInternals\': 1 argument required, but only 0 present.');
     }
@@ -84,6 +85,7 @@ class ElementInternals {
     }
 
     validationMessageMap.set(this, valid ? '' : validationMessage);
+    ref.setAttribute('aria-invalid', !valid);
     this.reportValidity();
   }
 

Diff for: src/utils.js

@@ -40,7 +40,7 @@ export const initLabels = (ref, labels) => {
       label.addEventListener('click', ref.focus.bind(ref)));
     const firstLabelId = `${labels[0].htmlFor}_Label`;
     labels[0].id = firstLabelId;
-    ref.setAttribute('aria-describedby', firstLabelId);
+    ref.setAttribute('aria-labelledby', firstLabelId);
   }
 };
 

Diff for: static/scripts/foo-bar.js

@@ -46,6 +46,10 @@ export class FooBar extends HTMLElement {
 
   _init() {
     this.input.addEventListener('input', this._handleChanges);
+
+    if (this.required) {
+      this._handleRequired(this.value);
+    }
   }
 
   _handleChanges(event) {
@@ -74,6 +78,14 @@ export class FooBar extends HTMLElement {
     this.internals_.setFormValue('');
   }
 
+  get required() {
+    return this.hasAttribute('required');
+  }
+
+  set required(required) {
+    this.setAttribute('aria-required', !!required);
+  }
+
   get value() {
     return this._value;
   }

Diff for: static/scripts/page.js

@@ -20,6 +20,7 @@ const testRoot = div.attachShadow({ mode: 'open' });
 const shadowForm = document.createElement('form');
 shadowForm.id = 'shadowTestForm';
 const fooBar = document.createElement('foo-bar');
+fooBar.required = true;
 testRoot.append(shadowForm);
 testRoot.append(fooBar);
 setTimeout(() => {