Feature/html5 autocomplete #146

josiahwilliams · 2024-06-20T18:18:23Z

alisonhall · 2024-06-20T19:08:00Z

The code walkthrough steps currently talk more about how to create a form and all of the attributes, rather than how to include the autocomplete functionality and how it's accessible. The code highlighting of the steps also highlights a lot of extra lines that shouldn't be highlighted. We should probably rethink what steps are actually needed for autocomplete.

package.json

content/head/autocomplete.php

zoltan-dulac · 2024-06-24T17:58:55Z

http://localhost:8888/autocomplete.php

I really like the layout here. Thank you.

chore: Reverting chromdriver back to version 124

zoltan-dulac · 2024-06-25T17:35:33Z

content/bottom/autocomplete.php

+            preflight: false, // disable preflight - prevents Tailwind from resetting all styles
+        }
+    }
+</script>


I would like to remove tailwind from this PR. The reasons are here.

We can discuss one-on-one if you like, of course.

Ok, I will work on removing Tailwinds from this PR.

Tailwinds has been removed.

zoltan-dulac · 2024-06-25T17:36:54Z

js/test/autocomplete.test.js

+            expect(domInfo.hasLabel).toBe(true);
+        }
+    });
+});


I like the idea of checking forms with labels. Let's also ensure the autocomplete functionality you have implemented is also checked here as well.

I have added tests to test autocomplete functionality.

cc:
@zoltan-dulac

Signed-off-by: josiahwilliams <[email protected]>

josiahwilliams · 2024-06-28T16:08:59Z

We definitely need to discuss including tailwind before merging this PR. It makes the code walkthrough experience a lot more bloated and hard to read, and it also changes other styles on the page (like the h1).

Is there any way we can not include tailwind at this time?

Tailwind has been removed and replaced with BEM and LESS.

zoltan-dulac · 2024-07-09T16:20:41Z

js/test/autocomplete.test.js

+            return document
+                .querySelector('#first-name')
+                .getAttribute('autocomplete');
+        });


You are checking specific input fields for specific autocomplete values. This works for this case, but how about if I add form fields?

What I would like to do is have an array that contains all the possible form field autocomplete attributes (you can get them on the MDN autocomplete page) and check that all input fields have a valid autocomplete value.

This is much more scalable (e.g. How about if I decide to add another form field?)

zoltan-dulac · 2024-07-09T16:21:35Z

js/test/autocomplete.test.js

+                givenNameInput.value = 'John';
+                givenNameInput.dispatchEvent(
+                    new Event('input', { bubbles: true }),
+                );


I don't think we need to test if this stuff. Let's talk about it at standup.

josiahwilliams added 4 commits June 17, 2024 12:35

Stubs out form for autocomplete

47e9eea

Adds test for autocomplete form

d02d9d6

Moves script tag from head to bottom

cfac9bc

updates steps

991c80f

josiahwilliams requested a review from alisonhall June 20, 2024 18:18

josiahwilliams marked this pull request as draft June 20, 2024 18:18