fix(ui5-breadcrumbs): remove char separators from accessibility annou…

…ncement (#8099) * fix(ui5-breadcrumbs): remove char separators from accessibility announcement * chore: adjust edge case for failing test
SAP · Jan 17, 2024 · ec1fd10 · ec1fd10
1 parent 38861c8
commit ec1fd10
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/packages/main/src/Breadcrumbs.hbs b/packages/main/src/Breadcrumbs.hbs
@@ -26,6 +26,8 @@
 				data-ui5-stable="{{this.stableDomRef}}">
 				{{this.innerText}}
 			</ui5-link>
+
+			<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
 		</li>
 		{{/each}}
 

diff --git a/packages/main/src/themes/Breadcrumbs.css b/packages/main/src/themes/Breadcrumbs.css
@@ -73,40 +73,40 @@
     right: 0;
 }
 
-/* links separator */
-li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "/"; /* default separator is "Slash" */
-    padding: 0 .25rem;
-    cursor: auto;
-    color: var(--sapContent_LabelColor);
-    display: inline-block;
-    font-family: "72override",var(--sapFontFamily);
-    font-size: var(--sapFontSize);
-}
-
 .ui5-breadcrumbs-popover-footer {
     display: flex;
     justify-content: flex-end;
     width: 100%;
 }
 
-/* separator styles */
-:host([separator-style="BackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "\\";
+/* links separator */
+.ui5-breadcrumbs-separator::after {
+	content: "/"; /* default separator is "Slash" */
+	padding: 0 .25rem;
+	cursor: auto;
+	color: var(--sapContent_LabelColor);
+	display: inline-block;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
 }
 
-:host([separator-style="DoubleBackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "\\\\";
+/* separator styles */
+:host([separator-style="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
+	content: "//";
 }
 
-:host([separator-style="DoubleGreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: ">>";
+:host([separator-style="BackSlash"]) .ui5-breadcrumbs-separator::after {
+	content: "\\";
 }
 
-:host([separator-style="DoubleSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "//";
+:host([separator-style="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
+	content: "\\\\";
 }
 
-:host([separator-style="GreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: ">";
+:host([separator-style="GreaterThan"]) .ui5-breadcrumbs-separator::after {
+	content: ">";
 }
+
+:host([separator-style="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
+	content: ">>";
+}
diff --git a/packages/main/test/pages/Breadcrumbs.html b/packages/main/test/pages/Breadcrumbs.html
@@ -125,7 +125,7 @@ <h2>Breadcrumbs with overflowing links</h2>
 			<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
 			<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
 			<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
-			<ui5-breadcrumbs-item id="item7" href="#">aa</ui5-breadcrumbs-item>
+			<ui5-breadcrumbs-item id="item7" href="#">aaaa</ui5-breadcrumbs-item>
 			<ui5-breadcrumbs-item>Location</ui5-breadcrumbs-item>
 		</ui5-breadcrumbs>
 	</div>