fix: anchor element focus order on form submission reversed compared to Chrome (#24)

Author: lideen

Diff for: src/utils.ts

@@ -102,6 +102,7 @@ export const formSubmitCallback = (event: Event) => {
     const nodes = Array.from(elements);
     /** Check the internals.checkValidity() of all nodes */
     const validityList = nodes
+      .reverse()
       .map(node => {
         const internals = internalsMap.get(node);
         return internals.reportValidity();

Diff for: test/ElementInternals.test.js

@@ -352,7 +352,7 @@ describe('The ElementInternals polyfill', () => {
 
     it('saves a reference to all shadow roots', () => {
       expect(internals.shadowRoot).to.equal(el.shadowRoot);
-    });;
+    });
 
     it('will focus the element if validated with anchor', async () => {
       internals.setValidity({
@@ -362,6 +362,17 @@ describe('The ElementInternals polyfill', () => {
       expect(document.activeElement).to.equal(el);
     });
 
+    it('will focus anchor elements in document order on form submission failure', () => {
+      internals.setValidity({
+        customError: true
+      }, 'Error message', el.input);
+      noname.internals.setValidity({
+        customError: true
+      }, 'Error message', noname.input);
+      button.click();
+      expect(document.activeElement).to.equal(el);
+    });
+
     it('will accept non strings', async () => {
       internals.setFormValue(['a', 'b']);
       expect(