From cd6f3f167b838bdb4d67bb678125731ce84b8fa1 Mon Sep 17 00:00:00 2001
From: stanislavh <stanislav.honcharov@sonarsource.com>
Date: Wed, 22 Nov 2023 17:31:14 +0100
Subject: [PATCH] SONAR-20461 Hovering/clicking on label label shouldn't
 interact with target input

---
 .../src/components/input/FormField.tsx         | 18 ++++++++++++------
 .../__tests__/CreateApplication-test.tsx       |  6 +++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/server/sonar-web/design-system/src/components/input/FormField.tsx b/server/sonar-web/design-system/src/components/input/FormField.tsx
index 1f525a01ea7..004fa45d3ec 100644
--- a/server/sonar-web/design-system/src/components/input/FormField.tsx
+++ b/server/sonar-web/design-system/src/components/input/FormField.tsx
@@ -52,15 +52,15 @@ export function FormField({
 }: Props) {
   return (
     <FieldWrapper className={className} id={id}>
-      <label aria-label={ariaLabel} className="sw-mb-2" htmlFor={htmlFor} title={title}>
-        <Highlight className="sw-flex sw-items-center sw-gap-2">
+      <Highlight className="sw-mb-2 sw-flex sw-items-center sw-gap-2">
+        <StyledLabel aria-label={ariaLabel} htmlFor={htmlFor} title={title}>
           {label}
           {required && (
-            <RequiredIcon aria-label={requiredAriaLabel ?? 'required'} className="sw--ml-1" />
+            <RequiredIcon aria-label={requiredAriaLabel ?? 'required'} className="sw-ml-1" />
           )}
-          {help}
-        </Highlight>
-      </label>
+        </StyledLabel>
+        {help}
+      </Highlight>
 
       {children}
 
@@ -69,6 +69,12 @@ export function FormField({
   );
 }
 
+// This is needed to prevent the target input/button from being focused
+// when clicking/hovering on the label. More info https://stackoverflow.com/questions/9098581/why-is-hover-for-input-triggered-on-corresponding-label-in-css
+const StyledLabel = styled.label`
+  pointer-events: none;
+`;
+
 const FieldWrapper = styled.div`
   ${tw`sw-flex sw-flex-col sw-w-full`}
 
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/CreateApplication-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/CreateApplication-test.tsx
index 45499026bd9..23c6dcb69af 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/CreateApplication-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/CreateApplication-test.tsx
@@ -41,9 +41,9 @@ const ui = {
   buttonAddApplication: byRole('button', { name: 'projects.create_application' }),
   createApplicationHeader: byText('qualifiers.create.APP'),
   mandatoryFieldWarning: byText('fields_marked_with_x_required'),
-  formNameField: byText('name'),
-  formKeyField: byText('key'),
-  formDescriptionField: byText('description'),
+  formNameField: byRole('textbox', { name: 'name field_required' }),
+  formKeyField: byRole('textbox', { name: 'key' }),
+  formDescriptionField: byRole('textbox', { name: 'description' }),
   formVisibilityField: byText('visibility'),
   formRadioButtonPrivate: byRole('radio', { name: 'visibility.private' }),
   formCreateButton: byRole('button', { name: 'create' }),
-- 
2.39.5