refactor: add pseudo-element to increase field button clickable area (#10454)

Author: web-padawan

packages/field-base/src/styles/button-base-styles.js

@@ -14,6 +14,9 @@ export const button = css`
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     user-select: none;
+    /* Ensure minimum click target (WCAG) */
+    padding: max(0px, (24px - 1lh) / 2);
+    margin: min(0px, (24px - 1lh) / -2);
   }
 
   /* Icon */

packages/text-area/src/styles/vaadin-text-area-base-styles.js

@@ -24,6 +24,10 @@ export const textAreaStyles = css`
     top: 0;
   }
 
+  [part~='clear-button'] {
+    top: min(0px, (24px - 1lh) / -2);
+  }
+
   /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
   :host([disabled]) ::slotted(textarea) {
     user-select: none;