Fix submission, fix some tests, improve tabbing + focus states

Author: janfaracik

src/main/js/add-item.js

@@ -237,6 +237,8 @@ document.addEventListener("DOMContentLoaded", () => {
               var message = parseResponseFromCheckJobName(data);
               if (message !== "") {
                 activateValidationMessage(message);
+                setFieldValidationStatus("name", false);
+                refreshSubmitButtonState();
               } else {
                 activateValidationMessage("");
                 setFieldValidationStatus("name", true);
@@ -308,7 +310,9 @@ document.addEventListener("DOMContentLoaded", () => {
     refreshSubmitButtonState();
   });
 
-  copyRadio.addEventListener("change", () => {
-    copyFromInput.focus();
-  });
+  if (copyRadio !== null) {
+    copyRadio.addEventListener("change", () => {
+      copyFromInput.focus();
+    });
+  }
 });

src/main/js/add-item.scss

@@ -11,7 +11,7 @@
     }
 
     // Make 'Duplicate an existing item' input not full width
-    input {
+    input[type="text"] {
       width: 100%;
       max-width: 400px;
     }

src/main/scss/components/_choice-list.scss

@@ -46,7 +46,7 @@
     }
 
     &:active,
-    &:focus-visible {
+    &:has(input[type="radio"]:focus) {
       z-index: 10;
       border-radius: calc(var(--form-input-border-radius) / 2);
 
@@ -79,7 +79,7 @@
 
     &:hover,
     &:active,
-    &:focus {
+    &:has(input[type="radio"]:focus) {
       .jenkins-choice-list__item__icon::before {
         background: rgb(from var(--text-color-secondary) r g b / 0.1);
         box-shadow:
@@ -89,7 +89,7 @@
       }
     }
 
-    &:focus {
+    &:has(input[type="radio"]:focus) {
       &::before {
         box-shadow: 0 0 0 0.2rem var(--text-color) !important;
       }
@@ -110,7 +110,7 @@
         &::before {
           box-shadow:
             inset var(--jenkins-border--subtle-shadow),
-            inset 0 0 18px 18px var(--accent-color);
+            inset 0 0 18px 18px var(--accent-color) !important;
         }
       }
 
@@ -146,7 +146,8 @@
     }
 
     label > input[type="radio"] {
-      display: none;
+      position: absolute;
+      opacity: 0;
     }
 
     &__icon {

src/main/scss/form/_input.scss

@@ -7,6 +7,7 @@
   width: 100%;
   min-height: 2.375rem;
   box-shadow: var(--form-input-glow);
+  caret-color: var(--focus-input-border);
 
   // Set height transition to 0s as vertical resizing has a delay/lag otherwise
   transition:

src/main/scss/form/_layout.scss

@@ -57,8 +57,6 @@
     --focus-input-border: var(--warning-color);
     --form-input-glow--focus: 0 0 0 0.25rem
       color-mix(in sRGB, var(--warning-color) 20%, transparent);
-
-    caret-color: var(--warning-color);
   }
 
   &:has(> .validation-error-area .error) {
@@ -67,8 +65,6 @@
     --focus-input-border: var(--error-color);
     --form-input-glow--focus: 0 0 0 0.25rem
       color-mix(in sRGB, var(--error-color) 20%, transparent);
-
-    caret-color: var(--error-color);
   }
 }
 

test/src/test/java/hudson/model/MyViewTest.java

@@ -88,7 +88,7 @@ void testDoCreateItem() throws Exception {
         form.getInputByName("name").setValue("job");
         form.getInputByName("name").blur();
         // Select the item clicking on the first item type shown
-        HtmlElement itemType = newItemPage.getFirstByXPath("//div[@class='category']/ul/li");
+        HtmlElement itemType = newItemPage.getFirstByXPath("//div[@class='jenkins-choice-list']/div/label");
         itemType.click();
         rule.submit(form);
         Item item = rule.jenkins.getItem("job");

test/src/test/java/hudson/model/ViewTest.java

@@ -894,12 +894,12 @@ void newJob_xssPreventedInGetIconFilePathPattern() throws Exception {
 
         HtmlPage page = wc.goTo("view/all/newJob");
 
-        Object resultIconChildrenCount = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .icon').children.length").getJavaScriptResult();
+        Object resultIconChildrenCount = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .jenkins-choice-list__item__icon').children.length").getJavaScriptResult();
         assertThat(resultIconChildrenCount, instanceOf(Integer.class));
         int resultIconChildrenCountInt = (int) resultIconChildrenCount;
         assertEquals(1, resultIconChildrenCountInt);
 
-        Object resultImgAttributesCount = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .icon img').attributes.length").getJavaScriptResult();
+        Object resultImgAttributesCount = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .jenkins-choice-list__item__icon img').attributes.length").getJavaScriptResult();
         assertThat(resultImgAttributesCount, instanceOf(Integer.class));
         int resultImgAttributesCountInt = (int) resultImgAttributesCount;
         assertEquals(1, resultImgAttributesCountInt);
@@ -929,7 +929,7 @@ void newJob_iconClassName() throws Exception {
 
         HtmlPage page = wc.goTo("view/all/newJob");
 
-        Object resultSrc = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .icon img').src").getJavaScriptResult();
+        Object resultSrc = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .jenkins-choice-list__item__icon img').src").getJavaScriptResult();
 
         assertThat(resultSrc, instanceOf(String.class));
         String resultSrcString = (String) resultSrc;
@@ -944,7 +944,7 @@ void newJob_svg() throws Exception {
 
         HtmlPage page = wc.goTo("view/all/newJob");
 
-        Object result = page.executeJavaScript("document.querySelector('.hudson_model_FreeStyleProject .icon svg')").getJavaScriptResult();
+        Object result = page.executeJavaScript("document.querySelector('.hudson_model_FreeStyleProject .jenkins-choice-list__item__icon svg')").getJavaScriptResult();
         assertThat(result, instanceOf(SVGElement.class));
         SVGElement svg = (SVGElement) result;
         assertThat(svg.getClassName_js(), is("icon-xlg"));
@@ -962,7 +962,7 @@ void newJob_twoLetterIcon() throws Exception {
 
         HtmlPage page = wc.goTo("view/all/newJob");
 
-        Object result = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .default-icon')").getJavaScriptResult();
+        Object result = page.executeJavaScript("document.querySelector('." + customizableTLID.customId + " .jenkins-choice-list__item__icon')").getJavaScriptResult();
         assertThat(result, instanceOf(HTMLElement.class));
         HTMLElement resultHtml = (HTMLElement) result;
         HTMLElement spanA = (HTMLElement) resultHtml.getFirstElementChild();