Skip to content

Commit 52236ec

Browse files
InnaAtanasovaInnaAtanasova
committed
fix(styles): a11y update for Message box [ci visual]
1 parent e7bd51a commit 52236ec

File tree

5 files changed

+270
-112
lines changed

5 files changed

+270
-112
lines changed

‎packages/styles/stories/Components/message-box/message-box.stories.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ Types.parameters = {
7575
story: `
7676
The message box can be displayed with various semantic colors and icons, indicating the type of message being relayed.
7777
78-
Semantic type | Modifier class | Description
78+
|Semantic type | Modifier class | Description
7979
:------------------ | :------------------- | :---------------
8080
Confirmation | \`fd-message-box--confirmation\` | Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that has to be confirmed, such as an intended deletion or an approval.
8181
Error                    | \`fd-message-box--error\` | Error messages can be triggered after the user has entered incorrect data or a system error has occurred. They should interrupt the user by displaying a dialog. A final action such as _Submit_ cannot be carried out until the user has rectified the error.
@@ -96,7 +96,7 @@ The message box has 1rem padding all around the body, and the header and footer
9696
9797
**To display responsive padding, add the following modifier classes to the content container:**
9898
99-
Modifier class | rem | Screen width
99+
|Modifier class | rem | Screen width
100100
------------------ | ---- | ---------------------
101101
\`fd-message-box__content--s\` | 1rem | <= 599px
102102
\`fd-message-box__content--m\` | 2rem | 600px - 1023px

‎packages/styles/stories/Components/message-box/responsive.example.html

+52-20
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11

2-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--information fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-7 fd-message-box-text-7" tabindex="-1">
3-
<section class="fd-message-box__content fd-message-box__content--s">
2+
<div
3+
class="fd-message-box-docs-static fd-message-box fd-message-box--information fd-message-box--active"
4+
role="alertdialog"
5+
aria-modal="true"
6+
aria-labelledby="fd-message-box-title-7"
7+
aria-describedby="fd-message-box-text-7"
8+
tabindex="-1">
9+
<div class="fd-message-box__content fd-message-box__content--s">
410
<header class="fd-bar fd-bar--header fd-message-box__header">
511
<div class="fd-bar__left">
612
<div class="fd-bar__element">
713
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-7">Information</h1>
814
</div>
915
</div>
1016
</header>
11-
<div class="fd-message-box__body" id="fd-message-box-text-7">
17+
18+
<section class="fd-message-box__body" id="fd-message-box-text-7">
1219
Informative message box for a small screen in cozy mode (mobile) and a "Show more" link in the body.
1320
<div class="fd-message-box__more">
1421
<a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Show more</span></a>
1522
</div>
16-
</div>
23+
</section>
24+
1725
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
1826
<div class="fd-bar__right">
1927
<div class="fd-bar__element">
@@ -23,23 +31,31 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-7">Information</h1>
2331
</div>
2432
</div>
2533
</footer>
26-
</section>
34+
</div>
2735
</div>
2836

2937
<br><br><br>
3038

31-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--error fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-8 fd-message-box-text-8" tabindex="-1">
32-
<section class="fd-message-box__content fd-message-box__content--m">
39+
<div
40+
class="fd-message-box-docs-static fd-message-box fd-message-box--error fd-message-box--active"
41+
role="alertdialog"
42+
aria-modal="true"
43+
aria-labelledby="fd-message-box-title-8"
44+
aria-describedby="fd-message-box-text-8"
45+
tabindex="-1">
46+
<div class="fd-message-box__content fd-message-box__content--m">
3347
<header class="fd-bar fd-bar--header fd-message-box__header">
3448
<div class="fd-bar__left">
3549
<div class="fd-bar__element">
3650
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-8">Error</h1>
3751
</div>
3852
</div>
3953
</header>
40-
<div class="fd-message-box__body" id="fd-message-box-text-8">
54+
55+
<section class="fd-message-box__body" id="fd-message-box-text-8">
4156
Error message box for a medium-sized screen in cozy mode (mobile).
42-
</div>
57+
</section>
58+
4359
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
4460
<div class="fd-bar__right">
4561
<div class="fd-bar__element">
@@ -49,24 +65,32 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-8">Error</h1>
4965
</div>
5066
</div>
5167
</footer>
52-
</section>
68+
</div>
5369
</div>
5470

5571

5672
<br><br><br>
5773

58-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--success fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-9 fd-message-box-text-9" tabindex="-1">
59-
<section class="fd-message-box__content fd-message-box__content--l">
74+
<div
75+
class="fd-message-box-docs-static fd-message-box fd-message-box--success fd-message-box--active"
76+
role="alertdialog"
77+
aria-modal="true"
78+
aria-labelledby="fd-message-box-title-9"
79+
aria-describedby="fd-message-box-text-9"
80+
tabindex="-1">
81+
<div class="fd-message-box__content fd-message-box__content--l">
6082
<header class="fd-bar fd-bar--header fd-message-box__header">
6183
<div class="fd-bar__left">
6284
<div class="fd-bar__element">
6385
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-9">Success</h1>
6486
</div>
6587
</div>
6688
</header>
67-
<div class="fd-message-box__body" id="fd-message-box-text-9">
89+
90+
<section class="fd-message-box__body" id="fd-message-box-text-9">
6891
Success message box for a large screen in compact mode (desktop).
69-
</div>
92+
</section>
93+
7094
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
7195
<div class="fd-bar__right">
7296
<div class="fd-bar__element">
@@ -76,23 +100,31 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-9">Success</h1>
76100
</div>
77101
</div>
78102
</footer>
79-
</section>
103+
</div>
80104
</div>
81105

82106
<br><br><br>
83107

84-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--warning fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-10 fd-message-box-text-10" tabindex="-1">
85-
<section class="fd-message-box__content fd-message-box__content--xl">
108+
<div
109+
class="fd-message-box-docs-static fd-message-box fd-message-box--warning fd-message-box--active"
110+
role="alertdialog"
111+
aria-modal="true"
112+
aria-labelledby="fd-message-box-title-10"
113+
aria-describedby="fd-message-box-text-10"
114+
tabindex="-1">
115+
<div class="fd-message-box__content fd-message-box__content--xl">
86116
<header class="fd-bar fd-bar--header fd-message-box__header">
87117
<div class="fd-bar__left">
88118
<div class="fd-bar__element">
89119
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-10">Warning</h1>
90120
</div>
91121
</div>
92122
</header>
93-
<div class="fd-message-box__body" id="fd-message-box-text-10">
123+
124+
<section class="fd-message-box__body" id="fd-message-box-text-10">
94125
Warning message box for an extra large screen in compact mode (desktop).
95-
</div>
126+
</section>
127+
96128
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
97129
<div class="fd-bar__right">
98130
<div class="fd-bar__element">
@@ -102,5 +134,5 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-10">Warning</h1>
102134
</div>
103135
</div>
104136
</footer>
105-
</section>
137+
</div>
106138
</div>

‎packages/styles/stories/Components/message-box/structure.example.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-1 fd-message-box-text-1" tabindex="-1">
2-
<section class="fd-message-box__content">
1+
<div
2+
class="fd-message-box-docs-static fd-message-box fd-message-box--active"
3+
role="alertdialog"
4+
aria-modal="true"
5+
aria-labelledby="fd-message-box-title-1"
6+
aria-describedby="fd-message-box-text-1"
7+
tabindex="-1">
8+
<div class="fd-message-box__content">
39
<header class="fd-bar fd-bar--header fd-message-box__header">
410
<div class="fd-bar__left">
511
<div class="fd-bar__element">
612
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-1">Title</h1>
713
</div>
814
</div>
915
</header>
10-
<div class="fd-message-box__body" id="fd-message-box-text-1">
16+
17+
<section class="fd-message-box__body" id="fd-message-box-text-1">
1118
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
12-
</div>
19+
</section>
20+
1321
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
1422
<div class="fd-bar__right">
1523
<div class="fd-bar__element">
@@ -24,5 +32,5 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-1">Title</h1>
2432
</div>
2533
</div>
2634
</footer>
27-
</section>
35+
</div>
2836
</div>

‎packages/styles/stories/Components/message-box/types.example.html

+69-30
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--confirmation fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-2 fd-message-box-text-2" tabindex="-1">
2-
<section class="fd-message-box__content">
1+
<div
2+
class="fd-message-box-docs-static fd-message-box fd-message-box--confirmation fd-message-box--active"
3+
role="alertdialog"
4+
aria-modal="true"
5+
aria-labelledby="fd-message-box-title-2"
6+
aria-describedby="fd-message-box-text-2"
7+
tabindex="-1">
8+
<div class="fd-message-box__content">
39
<header class="fd-bar fd-bar--header fd-message-box__header">
410
<div class="fd-bar__left">
511
<div class="fd-bar__element">
6-
<i class="sap-icon--sys-help-2"></i>
12+
<i class="sap-icon--sys-help-2" role="presentation" aria-hidden="true"></i>
713
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-2">Confirmation</h1>
814
</div>
915
</div>
1016
</header>
11-
<div class="fd-message-box__body" id="fd-message-box-text-2">
17+
18+
<section class="fd-message-box__body" id="fd-message-box-text-2">
1219
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
13-
</div>
20+
</section>
21+
1422
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
1523
<div class="fd-bar__right">
1624
<div class="fd-bar__element">
@@ -25,24 +33,31 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-2">Confirmation</h1>
2533
</div>
2634
</div>
2735
</footer>
28-
</section>
36+
</div>
2937
</div>
3038

3139
<br><br><br>
3240

33-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--error fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-3 fd-message-box-text-3" tabindex="-1">
34-
<section class="fd-message-box__content">
41+
<div
42+
class="fd-message-box-docs-static fd-message-box fd-message-box--error fd-message-box--active" role="alertdialog"
43+
aria-modal="true"
44+
aria-labelledby="fd-message-box-title-3"
45+
aria-describedby="fd-message-box-text-3"
46+
tabindex="-1">
47+
<div class="fd-message-box__content">
3548
<header class="fd-bar fd-bar--header fd-message-box__header">
3649
<div class="fd-bar__left">
3750
<div class="fd-bar__element">
38-
<i class="sap-icon--error"></i>
51+
<i class="sap-icon--error" role="presentation" aria-hidden="true"></i>
3952
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-3">Error</h1>
4053
</div>
4154
</div>
4255
</header>
43-
<div class="fd-message-box__body" id="fd-message-box-text-3">
56+
57+
<section class="fd-message-box__body" id="fd-message-box-text-3">
4458
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
45-
</div>
59+
</section>
60+
4661
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
4762
<div class="fd-bar__right">
4863
<div class="fd-bar__element">
@@ -52,24 +67,32 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-3">Error</h1>
5267
</div>
5368
</div>
5469
</footer>
55-
</section>
70+
</div>
5671
</div>
5772

5873
<br><br><br>
5974

60-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--success fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-4 fd-message-box-text-4" tabindex="-1">
61-
<section class="fd-message-box__content">
75+
<div
76+
class="fd-message-box-docs-static fd-message-box fd-message-box--success fd-message-box--active"
77+
role="alertdialog"
78+
aria-modal="true"
79+
aria-labelledby="fd-message-box-title-4"
80+
aria-describedby="fd-message-box-text-4"
81+
tabindex="-1">
82+
<div class="fd-message-box__content">
6283
<header class="fd-bar fd-bar--header fd-message-box__header">
6384
<div class="fd-bar__left">
6485
<div class="fd-bar__element">
65-
<i class="sap-icon--sys-enter-2"></i>
86+
<i class="sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
6687
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-4">Success</h1>
6788
</div>
6889
</div>
6990
</header>
70-
<div class="fd-message-box__body" id="fd-message-box-text-4">
91+
92+
<section class="fd-message-box__body" id="fd-message-box-text-4">
7193
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et mattis erat vel aliquet in sem urna et sagittis diam in vehicula.
72-
</div>
94+
</section>
95+
7396
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
7497
<div class="fd-bar__right">
7598
<div class="fd-bar__element">
@@ -79,24 +102,32 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-4">Success</h1>
79102
</div>
80103
</div>
81104
</footer>
82-
</section>
105+
</div>
83106
</div>
84107

85108
<br><br><br>
86109

87-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--warning fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-5 fd-message-box-text-5" tabindex="-1">
88-
<section class="fd-message-box__content">
110+
<div
111+
class="fd-message-box-docs-static fd-message-box fd-message-box--warning fd-message-box--active"
112+
role="alertdialog"
113+
aria-modal="true"
114+
aria-labelledby="fd-message-box-title-5"
115+
aria-describedby="fd-message-box-text-5"
116+
tabindex="-1">
117+
<div class="fd-message-box__content">
89118
<header class="fd-bar fd-bar--header fd-message-box__header">
90119
<div class="fd-bar__left">
91120
<div class="fd-bar__element">
92-
<i class="sap-icon--alert"></i>
121+
<i class="sap-icon--alert" role="presentation" aria-hidden="true"></i>
93122
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-5">Warning</h1>
94123
</div>
95124
</div>
96125
</header>
97-
<div class="fd-message-box__body" id="fd-message-box-text-5">
126+
127+
<section class="fd-message-box__body" id="fd-message-box-text-5">
98128
Vivamus sagittis diam in vehicula lobortis sapien arcu mattis erat vel aliquet sem urna et.
99-
</div>
129+
</section>
130+
100131
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
101132
<div class="fd-bar__right">
102133
<div class="fd-bar__element">
@@ -106,24 +137,32 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-5">Warning</h1>
106137
</div>
107138
</div>
108139
</footer>
109-
</section>
140+
</div>
110141
</div>
111142

112143
<br><br><br>
113144

114-
<div class="fd-message-box-docs-static fd-message-box fd-message-box--information fd-message-box--active" role="alertdialog" aria-modal="true" aria-labelledby="fd-message-box-title-6 fd-message-box-text-6" tabindex="-1">
115-
<section class="fd-message-box__content">
145+
<div
146+
class="fd-message-box-docs-static fd-message-box fd-message-box--information fd-message-box--active"
147+
role="alertdialog"
148+
aria-modal="true"
149+
aria-labelledby="fd-message-box-title-6"
150+
aria-describedby="fd-message-box-text-6"
151+
tabindex="-1">
152+
<div class="fd-message-box__content">
116153
<header class="fd-bar fd-bar--header fd-message-box__header">
117154
<div class="fd-bar__left">
118155
<div class="fd-bar__element">
119-
<i class="sap-icon--information"></i>
156+
<i class="sap-icon--information" role="presentation" aria-hidden="true"></i>
120157
<h1 class="fd-title fd-title--h5" id="fd-message-box-title-6">Information</h1>
121158
</div>
122159
</div>
123160
</header>
124-
<div class="fd-message-box__body" id="fd-message-box-text-6">
161+
162+
<section class="fd-message-box__body" id="fd-message-box-text-6">
125163
Vivamus sagittis diam in vehicula lobortis.
126-
</div>
164+
</section>
165+
127166
<footer class="fd-bar fd-bar--footer fd-message-box__footer">
128167
<div class="fd-bar__right">
129168
<div class="fd-bar__element">
@@ -133,5 +172,5 @@ <h1 class="fd-title fd-title--h5" id="fd-message-box-title-6">Information</h1>
133172
</div>
134173
</div>
135174
</footer>
136-
</section>
175+
</div>
137176
</div>

0 commit comments

Comments
 (0)