DP-30528 [WCAG 2.2: MF] 2.5.8: Target Size (Minimum) (#1875)

* breadcrumbs home target size adjustment for wcag 2.2 update

* test edit - footnote target size adjustment for wcag 2.2 update

* adjust breadcrumbs container left margin for home item padding

* remove note comments for test

* remove note comments for test2

* update backstop reference

* add changelog for DP-30528

* fix left align

* Update packages/assets/scss/03-organisms/_rich-text.scss

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>

* Update packages/assets/scss/03-organisms/_rich-text.scss

---------

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>

changelogs/DP-30528.yml

@@ -0,0 +1,6 @@
+Changed:
+  - project: Patternlab
+    component: Breadcrumbs, Footnotes
+    description: Adjust target size for breadcrumbs home and footnotes to meet WCAG 2.2. (#1875)
+    issue: DP-30528
+    impact: Patch

packages/assets/scss/02-molecules/_footnote.scss

@@ -24,11 +24,11 @@
   & > &__link {
     border-width: 2px;
     border-style: solid;
-    font-size: $fonts-2xsmall;
+    font-size: $fonts-xsmall;
     line-height: 1;
-    padding: .05em .35em;
+    padding: 3px 6px;
     position: absolute;
-      top: 5px;
+      top: 3px;
       left: 0;
   }
 

packages/assets/scss/03-organisms/_breadcrumbs.scss

@@ -93,7 +93,7 @@ $breadcrumbs-scrollbar-height: 12px;
     &:first-child {
 
       &:after {
-        margin-left: 0;
+        margin-left: -3px;
       }
     }
 
@@ -181,6 +181,8 @@ $breadcrumbs-scrollbar-height: 12px;
 
       &.ma__breadcrumbs__item__icon-link {
         box-shadow: none;
+        padding: 5px 3px;
+        margin-left: -3px;
 
         &:hover {
           box-shadow: none;

packages/assets/scss/03-organisms/_rich-text.scss

@@ -60,11 +60,11 @@ $heading-indent: $gutter;
   & &__footnote {
     border-style: solid;
     border-width: 2px;
-    font-size: .6em;
+    font-size: $fonts-smaller;
     line-height: 1;
-    padding: 0 .3em;
+    padding: 0.5px 6.5px;
     position: relative;
-    top: .25em;
+    top: .5em;
     vertical-align: top;
     transition: all ease .4s;