SONAR-20461 Hovering/clicking on label label shouldn't interact with target input

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 1f525a01ea7ec17021d9989cdeac934819361384..004fa45d3ec25fcb2939f851d76e2feaf80f060e 100644 (file)
--- 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 45499026bd991472db0818577ee0e9d86c6ecc27..23c6dcb69afb84b6d7029d047440fc9258996f2f 100644 (file)
--- 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' }),