Adjust label spacing to account for min target size

Problem

The space between the remove (×) button in a label and the clickable label text is too small to satisfy the new WCAG success criteria. Understanding SC 2.5.8: Target Size (Minimum) (Level AA)

From https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1844#note_1931586730:

As I've been going through the UI, one component that stands out so far is the label, where the linked text and × (remove) button are close enough, and the target size for the button small enough that I believe this would fail. In the screenshot below, I've added the 24px target size circle, and it does overlap the linked text. It seems like a few more pixels between the button and text would get this to passing. FYI @seggenberger @sdejonge @cynthia

Solution

Increase the space between the remove button and the label text.

Proposal from @sdejonge:

Agreed. This is is an interesting criteria, so the close button itself doesn't need to be 24px is size, it can be 20px within the height of GlLabel (we have overflow: hidden) and have a 4px gap between the close button and the label text (interactive link when target provided).

I had a quick play locally to see what this might look like:

Some refinement is necessarily to ensure we provide proper spacing on all sides of the label with/without close button, also ensuring it is robust in email as well.

Changes I applied, will need refinement:

diff --git a/src/components/base/label/label.scss b/src/components/base/label/label.scss
index e04b511ce..63cf8295e 100644
--- a/src/components/base/label/label.scss
+++ b/src/components/base/label/label.scss
@@ -52,10 +52,10 @@ $label-close-button: '.gl-label-close.gl-button';
   > #{$label-close-button} {
     @include gl-border-0;
     @include gl-display-flex;
-    width: px-to-rem(14px);
-    height: px-to-rem(14px);
+    width: px-to-rem(20px);
+    height: px-to-rem(20px);
     margin-left: #{-$gl-spacing-scale-1 - ($gl-spacing-scale-1 / 2)};
-    margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
+    // margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
     @include gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;