[FormAnalyzer] Fix paperlesspost.com login form (#711)

* fix: check if texts are wrapped in buttons

* fix: check if submit attribute was explicitly

* revert: don't check for parent external link

src/Form/FormAnalyzer.js

@@ -243,12 +243,12 @@ class FormAnalyzer {
             customElements?.get(tagName) != null && /-link$/.test(tagName) && findElementsInShadowTree(el, 'a').length > 0;
 
         // if an external link matches one of the regexes, we assume the match is not pertinent to the current form
-        return (
+        const isElementLink =
             (el instanceof HTMLAnchorElement && el.href && el.getAttribute('href') !== '#') ||
             (el.getAttribute('role') || '').toUpperCase() === 'LINK' ||
-            el.matches('button[class*=secondary]') ||
-            isCustomWebElementLink
-        );
+            el.matches('button[class*=secondary]');
+
+        return isCustomWebElementLink || isElementLink;
     }
 
     evaluateElement(el) {
@@ -272,7 +272,7 @@ class FormAnalyzer {
             if (likelyASubmit) {
                 this.form.querySelectorAll('input[type=submit], button[type=submit]').forEach((submit) => {
                     // If there is another element marked as submit and this is not, flip back to false
-                    if (el.type !== 'submit' && el !== submit) {
+                    if (el.getAttribute('type') !== 'submit' && el !== submit) {
                         likelyASubmit = false;
                     }
                 });

test-forms/index.json

@@ -546,6 +546,6 @@
   { "html": "single-select-form.html" },
   { "html": "camelcamelcamel_login.html" },
   { "html": "accounts_oneplus_login.html"},
-  { "html": "google_password_manager_search.html"}
-
+  { "html": "google_password_manager_search.html"},
+  { "html": "paperlesspost_login.html"}
 ]

test-forms/paperlesspost_login.html

@@ -0,0 +1,36 @@
+<form class="flex flex-col paragraph-xsmall text-lapel">
+    <a class="flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white relative border-alto border-2 mb-3 h-12 leading-3 heading-xsmall rounded-full" aria-labelledby="google-log-in-button-label" href="/auth/google_oauth2">
+       <svg class="absolute left-0 ml-4" height="1.25rem" viewBox="0 0 16 16" width="1.25rem" xmlns="http://www.w3.org/2000/svg">
+          <title>Google logo</title>
+          <g fill="none" fill-rule="evenodd">
+             <path d="M15.68 8.18a9.2 9.2 0 00-.15-1.63H8v3.09h4.3c-.18 1-.74 1.85-1.6 2.41v2.01h2.6a7.8 7.8 0 002.38-5.88z" fill="#4285F4"></path>
+             <path d="M8 16c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 01-7.18-2.54H.85v2.07A8 8 0 008 16z" fill="#34A853"></path>
+             <path d="M3.52 9.52a4.8 4.8 0 010-3.04V4.41H.85a8 8 0 000 7.18l2.67-2.07z" fill="#FBBC05"></path>
+             <path d="M8 3.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 00.85 4.4l2.66 2.08c.63-1.9 2.4-3.3 4.48-3.3z" fill="#EA4335"></path>
+          </g>
+       </svg>
+       <span id="google-log-in-button-label" class="mt-0.5">Log in with Google</span>
+    </a>
+    <a class="flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white relative border-alto border-2 h-12 mb-3 leading-6 heading-xsmall rounded-full" aria-labelledby="facebook-log-in-button-label" href="/auth/facebook">
+       <svg class="absolute left-0 ml-4" height="1.25rem" viewBox="0 0 115 220" width="1.25rem" xmlns="http://www.w3.org/2000/svg">
+          <title>Facebook icon</title>
+          <path d="M74.4 219.3v-99.8h33.5l5.02-38.9H74.41V55.79c0-11.26 3.13-18.94 19.27-18.94h20.6V2.03C110.72 1.58 98.49.52 84.27.52c-29.7 0-50.03 18.13-50.03 51.42V80.6H.66v38.9h33.58v99.8h40.17z" fill="#1877f2"></path>
+       </svg>
+       <span id="facebook-log-in-button-label" class="mt-0.5">Log in with Facebook</span>
+    </a>
+    <a class="flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white relative border-alto border-2 h-12 heading-xsmall rounded-full" aria-labelledby="apple-log-in-button-label" href="/auth/apple">
+       <svg class="absolute left-0 ml-4" height="1.25rem" viewBox="0 0 18 18" width="1.25rem" xmlns="http://www.w3.org/2000/svg">
+          <title>Apple logo</title>
+          <path d="M12.96 9.42c.02-1.38.8-2.65 2.06-3.37a4.53 4.53 0 00-3.5-1.76c-1.46-.14-2.89.82-3.64.82-.76 0-1.92-.8-3.16-.78C3.1 4.38 1.6 5.22.8 6.55-.89 9.27.37 13.28 2 15.48c.8 1.08 1.76 2.28 3 2.24C6.2 17.67 6.67 17 8.13 17c1.45 0 1.88.72 3.15.7 1.3-.03 2.12-1.09 2.9-2.18A8.68 8.68 0 0015.51 13a3.9 3.9 0 01-2.55-3.58zM10.57 2.84c.7-.8 1.06-1.81.97-2.84-1.08.1-2.09.59-2.8 1.35a3.6 3.6 0 00-1 2.74 3.7 3.7 0 002.83-1.25z" fill="#333333"></path>
+       </svg>
+       <span class="mt-0.5" id="apple-log-in-button-label">Log in with Apple</span>
+    </a>
+    <div class="bg-gallery p-4 mt-4">
+       <div class="flex-initial px-2 paragraph-medium text-center mb-4">Log in with email</div>
+       <input class="block w-full placeholder-dusty-gray border-dove focus:ring-gatsby focus:border-gatsby [.invalid_&amp;]:border-error mb-4 paragraph-medium py-0 h-11" placeholder="Enter your email" autocapitalize="none" autocorrect="off" type="email" aria-invalid="false" aria-placeholder="Enter your email" aria-required="true" data-testid="email-input" value="" data-manual-scoring="username">
+       <div class="relative flex items-center mb-4 paragraph-medium"><input class="block w-full placeholder-dusty-gray border-dove focus:ring-gatsby focus:border-gatsby [.invalid_&amp;]:border-error paragraph-medium py-0 h-11" placeholder="Enter your password" autocapitalize="none" autocorrect="off" type="password" aria-placeholder="Enter your password" aria-invalid="false" aria-required="true" data-testid="password-input" value="" data-manual-scoring="password.current"><button class="absolute inset-y-0 right-0 px-4 flex items-center tracked-medium cursor-pointer text-wolf" type="button">show</button></div>
+       <button class="flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white bg-gatsby text-white leading-5 p-4 paragraph-medium w-full rounded-full" type="submit" data-testid="login-submit-button" data-manual-submit>Log in</button>
+    </div>
+    <div class="flex justify-between items-center w-full text-center mt-4"><button class="paragraph-xsmall text-gatsby mr-auto">One-Time Code</button><button class="paragraph-xsmall text-gatsby ml-auto">Forgot Password?</button></div>
+    <button class="paragraph-medium mt-4"><span>Don’t have an account? </span><span class="text-gatsby hover:text-dark-blue mb-1">Sign up</span><span>.</span></button>
+ </form>