Merge branch '214921-improve-tabbing-behavior-when-creating-new-projects' into 'master'

Fix tabbing of form fields in projects/new flow

See merge request gitlab-org/gitlab!33209

app/assets/stylesheets/framework/common.scss

@@ -135,7 +135,7 @@ hr {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  > div:not(.block),
+  > div:not(.block):not(.select2-display-none),
   .str-truncated {
     display: inline;
   }

app/assets/stylesheets/framework/selects.scss

@@ -58,6 +58,42 @@
     }
   }
 
+  // Essentially we’re doing @include form-control-focus here (from
+  // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
+  // `&:focus` selector and we’re never actually focusing the .select2-choice
+  // link nor the .select2-container, the Select2 library focuses an off-screen
+  // .select2-focusser element instead.
+  &.select2-container-active:not(.select2-dropdown-open) {
+    .select2-choice {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      outline: 0;
+    }
+
+    // Reusable focus “glow” box-shadow
+    @mixin form-control-focus-glow {
+      @if $enable-shadows {
+        box-shadow: $input-box-shadow, $input-focus-box-shadow;
+      } @else {
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+
+    // Apply the focus “glow” shadow to the .select2-container if it also has
+    // the .block-truncated class as that applies an overflow: hidden, thereby
+    // hiding the glow of the nested .select2-choice element.
+    &.block-truncated {
+      @include form-control-focus-glow;
+    }
+
+    // Apply the glow directly to the .select2-choice link if we’re not
+    // block-truncating the container.
+    &:not(.block-truncated) .select2-choice {
+      @include form-control-focus-glow;
+    }
+  }
+
   &.is-invalid {
     ~ .invalid-feedback {
       display: block;

app/views/projects/_new_project_fields.html.haml

@@ -23,7 +23,7 @@
                                                                       display_path: true,
                                                                       extra_group: namespace_id),
                    {},
-                   { class: 'select2 js-select-namespace qa-project-namespace-select block-truncated', tabindex: 1, data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "project_path", track_value: "" }})
+                   { class: 'select2 js-select-namespace qa-project-namespace-select block-truncated', data: { track_label: "#{track_label}", track_event: "activate_form_input", track_property: "project_path", track_value: "" }})
 
       - else
         .input-group-prepend.static-namespace.flex-shrink-0.has-tooltip{ title: user_url(current_user.username) + '/' }

changelogs/unreleased/214921-improve-tabbing-behavior-when-creating-new-projects.yml

+---
+title: Fix tabbing through form fields in projects/new flow
+merge_request: 33209
+author:
+type: fixed