fix: breadcrumb with single character fails wcag 2.2 target size (#19287)

* fix: breadcrumb with single character fails wcag 2.2 target size

* fix: update same spacing in web-components as well

* fix: change code

* fix: removed size

Author: preetibansalui

packages/styles/scss/components/breadcrumb/_breadcrumb.scss

@@ -49,6 +49,11 @@
     margin-inline-end: $spacing-02;
   }
 
+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item .#{$prefix}--link {
+    justify-content: center;
+    min-inline-size: $spacing-04;
+  }
+
   .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited {
     color: $link-primary;
 

packages/web-components/src/components/breadcrumb/breadcrumb.scss

@@ -126,6 +126,10 @@ $css--plex: true !default;
     display: none;
   }
 }
+:host(#{$prefix}-breadcrumb-link[size='sm']) {
+  min-inline-size: $spacing-04;
+  text-align: center;
+}
 
 :host(#{$prefix}-breadcrumb-link[aria-current='page']) .#{$prefix}--link {
   color: $text-primary;

packages/web-components/src/components/breadcrumb/breadcrumb.ts

@@ -29,7 +29,7 @@ class CDSBreadcrumb extends LitElement {
    * Specify the size of the Breadcrumb. Currently
    * supports the following: `sm` & `md` (default: 'md')
    */
-  @property()
+  @property({ type: BREADCRUMB_SIZE, reflect: true })
   size = BREADCRUMB_SIZE.MEDIUM;
 
   /**
@@ -53,6 +53,16 @@ class CDSBreadcrumb extends LitElement {
     super.connectedCallback();
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('size')) {
+      const items = this.querySelectorAll(`${prefix}-breadcrumb-item`);
+      items?.forEach((item) => {
+        const link = item.querySelector(`${prefix}-breadcrumb-link`);
+        link?.setAttribute('size', this.size);
+      });
+    }
+  }
+
   render() {
     const classes = classMap({
       [`${prefix}--breadcrumb`]: true,