Skip to content

Commit f3bb9f8

Browse files
InnaAtanasovaInnaAtanasova
authored
fix(styles): add design and a11y updates for Breadcrumb [ci visual] (#6026)
1 parent c0e83a5 commit f3bb9f8

File tree

6 files changed

+411
-155
lines changed

6 files changed

+411
-155
lines changed

‎packages/styles/src/breadcrumb.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
$block: #{$fd-namespace}-breadcrumb;
77

88
.#{$block} {
9-
// BLOCK BASE *******************************************
109
@include fd-reset();
1110

1211
@include fd-flex-vertical-center() {
@@ -16,16 +15,17 @@ $block: #{$fd-namespace}-breadcrumb;
1615
--fdLink_Line_Height: 1.5rem;
1716

1817
list-style: none;
18+
margin-block-end: 0.5rem;
1919

20-
// ELEMENTS *******************************************
2120
&__item {
2221
@include fd-reset();
2322

23+
padding-block: 0.0625rem;
2424
color: var(--sapContent_LabelColor);
2525

2626
&::after {
2727
margin-inline: 0.25rem;
28-
color: var(--sapContent_LabelColor);
28+
color: var(--sapTextColor);
2929
content: var(--fdBreadcrumb_Separator, "/");
3030
}
3131

‎packages/styles/stories/Components/breadcrumb/current-item.example.html

+42-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,51 @@
11
<nav aria-label="Breadcrumb Trail">
22
<ol class="fd-breadcrumb">
3-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a></li>
4-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a></li>
5-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Titanium</span></a></li>
6-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Ultra Portable</span></a></li>
7-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">12 inch</span></a></li>
8-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Super portable deluxe</span></a></li>
9-
<li aria-current="page" class="fd-breadcrumb__item">Laptop</li>
3+
<li class="fd-breadcrumb__item">
4+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Root Page 1 of 7"><span class="fd-link__content">Products</span></a>
5+
</li>
6+
<li class="fd-breadcrumb__item">
7+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 2 of 7"><span class="fd-link__content">Suppliers</span></a>
8+
</li>
9+
<li class="fd-breadcrumb__item">
10+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 3 of 7"><span class="fd-link__content">Titanium</span></a>
11+
</li>
12+
<li class="fd-breadcrumb__item">
13+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 4 of 7"><span class="fd-link__content">Ultra Portable</span></a>
14+
</li>
15+
<li class="fd-breadcrumb__item">
16+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 5 of 7"><span class="fd-link__content">12 inch</span></a>
17+
</li>
18+
<li class="fd-breadcrumb__item">
19+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 6 of 7"><span class="fd-link__content">Super portable deluxe</span></a>
20+
</li>
21+
<li class="fd-breadcrumb__item">
22+
<span role="link" aria-current="page" aria-label="Current page 7 of 7">Laptop</span>
23+
</li>
1024
</ol>
1125
</nav>
1226
<br>
1327
<nav aria-label="Breadcrumb Trail">
1428
<ol class="fd-breadcrumb">
15-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a></li>
16-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a></li>
17-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Titanium</span></a></li>
18-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Ultra Portable</span></a></li>
19-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">12 inch</span></a></li>
20-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Super portable deluxe</span></a></li>
21-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Laptop</span></a></li>
29+
<li class="fd-breadcrumb__item">
30+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Root Page 1 of 7"><span class="fd-link__content">Products</span></a>
31+
</li>
32+
<li class="fd-breadcrumb__item">
33+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 2 of 7"><span class="fd-link__content">Suppliers</span></a>
34+
</li>
35+
<li class="fd-breadcrumb__item">
36+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 3 of 7"><span class="fd-link__content">Titanium</span></a>
37+
</li>
38+
<li class="fd-breadcrumb__item">
39+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 4 of 7"><span class="fd-link__content">Ultra Portable</span></a>
40+
</li>
41+
<li class="fd-breadcrumb__item">
42+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 5 of 7"><span class="fd-link__content">12 inch</span></a>
43+
</li>
44+
<li class="fd-breadcrumb__item">
45+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 6 of 7"><span class="fd-link__content">Super portable deluxe</span></a>
46+
</li>
47+
<li class="fd-breadcrumb__item">
48+
<a class="fd-link" tabindex="0" href="#" aria-current="page" aria-label="Current page 7 of 7"><span class="fd-link__content">Laptop</span></a>
49+
</li>
2250
</ol>
2351
</nav>

‎packages/styles/stories/Components/breadcrumb/overflow.example.html

+15-13
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,30 @@
2121
<div class="fd-popover__wrapper">
2222
<ul class="fd-list fd-list--navigation" role="menu">
2323
<li tabindex="-1" role="menuitem" class="fd-list__item fd-list__item--link">
24-
<a tabindex="0" class="fd-list__link" href="#">
25-
<span class="fd-list__title">Products</span>
26-
</a>
24+
<a class="fd-list__link" tabindex="0" href="#" aria-current="false" aria-label="Root Page 1 of 7"><span class="fd-list__title">Products</span></a>
2725
</li>
2826
<li tabindex="-1" role="menuitem" class="fd-list__item fd-list__item--link">
29-
<a tabindex="0" class="fd-list__link" href="#">
30-
<span class="fd-list__title">Suppliers</span>
31-
</a>
27+
<a class="fd-list__link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 2 of 7"><span class="fd-list__title">Suppliers</span></a>
3228
</li>
3329
<li tabindex="-1" role="menuitem" class="fd-list__item fd-list__item--link">
34-
<a tabindex="0" class="fd-list__link" href="#">
35-
<span class="fd-list__title">Titanium</span>
36-
</a>
30+
<a class="fd-list__link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 3 of 7"><span class="fd-list__title">Titanium</span></a>
3731
</li>
3832
</ul>
3933
</div>
4034
</div>
4135
</div></li>
42-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Ultra Portable</span></a></li>
43-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">12 inch</span></a></li>
44-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Super portable deluxe</span></a></li>
45-
<li aria-current="page" class="fd-breadcrumb__item">Laptop</li>
36+
<li class="fd-breadcrumb__item">
37+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 4 of 7"><span class="fd-link__content">Ultra Portable</span></a>
38+
</li>
39+
<li class="fd-breadcrumb__item">
40+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 5 of 7"><span class="fd-link__content">12 inch</span></a>
41+
</li>
42+
<li class="fd-breadcrumb__item">
43+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 6 of 7"><span class="fd-link__content">Super portable deluxe</span></a>
44+
</li>
45+
<li class="fd-breadcrumb__item">
46+
<span role="link" aria-current="page" aria-label="Current page 7 of 7">Laptop</span>
47+
</li>
4648
</ol>
4749
</nav>
4850
<div style="height: 150px"></div>

‎packages/styles/stories/Components/breadcrumb/standard.example.html

+21-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
<nav aria-label="Breadcrumb Trail">
22
<ol class="fd-breadcrumb">
3-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a></li>
4-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a></li>
5-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Titanium</span></a></li>
6-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Ultra Portable</span></a></li>
7-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">12 inch</span></a></li>
8-
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Super portable deluxe</span></a></li>
9-
<li aria-current="page" class="fd-breadcrumb__item">Laptop</li>
3+
<li class="fd-breadcrumb__item">
4+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Root Page 1 of 7"><span class="fd-link__content">Products</span></a>
5+
</li>
6+
<li class="fd-breadcrumb__item">
7+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 2 of 7"><span class="fd-link__content">Suppliers</span></a>
8+
</li>
9+
<li class="fd-breadcrumb__item">
10+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 3 of 7"><span class="fd-link__content">Titanium</span></a>
11+
</li>
12+
<li class="fd-breadcrumb__item">
13+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 4 of 7"><span class="fd-link__content">Ultra Portable</span></a>
14+
</li>
15+
<li class="fd-breadcrumb__item">
16+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 5 of 7"><span class="fd-link__content">12 inch</span></a>
17+
</li>
18+
<li class="fd-breadcrumb__item">
19+
<a class="fd-link" tabindex="0" href="#" aria-current="false" aria-label="Parent Page 6 of 7"><span class="fd-link__content">Super portable deluxe</span></a>
20+
</li>
21+
<li class="fd-breadcrumb__item">
22+
<span role="link" aria-current="page" aria-label="Current page 7 of 7">Laptop</span>
23+
</li>
1024
</ol>
1125
</nav>

0 commit comments

Comments
 (0)