Verified Commit b94ae96a authored by godotislate's avatar godotislate
Browse files

fix: #3583516 Breadcrumb separators are exposed to the accessibility tree 

By: mgifford
By: kentr
By: angel_devoeted
By: mherchel
By: godotislate
By: smustgrave
By: amateescu
By: catch
parent 31567154

core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml

+1 −1
Changes for core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml: 1 added line, 1 removed line.
Original line number Diff line number Diff line 
ScriptCount: 25

ScriptBytes: 3621032

StylesheetCount: 7

StylesheetBytes: 865773
 
StylesheetBytes: 862620

core/themes/default_admin/css/components/breadcrumb.css

+7 −52
Changes for core/themes/default_admin/css/components/breadcrumb.css: 7 added lines, 52 removed lines.
Original line number Diff line number Diff line
@@ -10,57 +10,7 @@ 
 * Breadcrumbs.

 */



.breadcrumb {

  padding: 0;

  color: var(--admin-color-text);

  font-size: 0.79rem;

}



.breadcrumb__list,

[dir="rtl"] .breadcrumb__list {

  margin: 0;

  padding: 0;

  list-style-type: none;

}



.breadcrumb__item,

.breadcrumb__link {

  display: inline-block;

  -webkit-text-decoration: none;

  text-decoration: none;

  color: var(--admin-color-text);

  font-weight: bold;

  line-height: 1.5rem;

}



.breadcrumb__item + .breadcrumb__item::before {

  display: inline-block;

  padding: 0 0.75rem;

  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");



  [dir="rtl"] & {

    transform: scaleX(-1);

  }



  @media (forced-colors: active) {

    width: 0.3125rem; /* Width and height of the SVG. */

    height: 0.5rem;

    content: "";

    background-color: canvastext;

    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");

    mask-size: contain;

    mask-repeat: no-repeat;

    mask-position: center;

  }

}



.breadcrumb__link:hover,

.breadcrumb__link:focus {

  -webkit-text-decoration: none;

  text-decoration: none;

}



:where(*),

*,

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .breadcrumb {

    padding: 0;
@@ -100,7 +50,7 @@ 
    & + .breadcrumb__item::before {

      display: inline-block;

      padding: 0 0.5em;

      content: "/";

      content: "/" / "";

      vertical-align: middle;

      opacity: 0.3;

      background: none;
@@ -111,6 +61,11 @@ 
      }

    }



    /* Flip separator horizontally for RTL. */

    &:not(:first-of-type) + .breadcrumb__item:dir(rtl)::before {

      scale: -1 1;

    }



    &:first-of-type .breadcrumb__link {

      position: relative;

      padding-inline-start: 1.75em;

core/themes/default_admin/css/components/breadcrumb.pcss.css

+7 −50
Changes for core/themes/default_admin/css/components/breadcrumb.pcss.css: 7 added lines, 50 removed lines.
Original line number Diff line number Diff line
@@ -3,55 +3,7 @@ 
 * Breadcrumbs.

 */



.breadcrumb {

  padding: 0;

  color: var(--admin-color-text);

  font-size: 0.79rem;

}



.breadcrumb__list,

[dir="rtl"] .breadcrumb__list {

  margin: 0;

  padding: 0;

  list-style-type: none;

}



.breadcrumb__item,

.breadcrumb__link {

  display: inline-block;

  text-decoration: none;

  color: var(--admin-color-text);

  font-weight: bold;

  line-height: 1.5rem;

}



.breadcrumb__item + .breadcrumb__item::before {

  display: inline-block;

  padding: 0 0.75rem;

  content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);



  [dir="rtl"] & {

    transform: scaleX(-1);

  }



  @media (forced-colors: active) {

    width: 5px; /* Width and height of the SVG. */

    height: 8px;

    content: "";

    background-color: canvastext;

    mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);

    mask-size: contain;

    mask-repeat: no-repeat;

    mask-position: center;

  }

}



.breadcrumb__link:hover,

.breadcrumb__link:focus {

  text-decoration: none;

}



:where(*),

*,

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {

  .breadcrumb {

    padding: 0;
@@ -90,7 +42,7 @@ 
    & + .breadcrumb__item::before {

      display: inline-block;

      padding: 0 0.5em;

      content: "/";

      content: "/" / "";

      vertical-align: middle;

      opacity: 0.3;

      background: none;
@@ -101,6 +53,11 @@ 
      }

    }



    /* Flip separator horizontally for RTL. */

    &:not(:first-of-type) + .breadcrumb__item:dir(rtl)::before {

      scale: -1 1;

    }



    &:first-of-type .breadcrumb__link {

      position: relative;

      padding-inline-start: 1.75em;