Skip to content

Commit 92c021b

Browse files
PosikBoyPosikBoy
authored
fix(a11y): fixed accessibility in notifications (#380)
1 parent f21e7fe commit 92c021b

10 files changed

Lines changed: 378 additions & 176 deletions

File tree

‎src/components/Notification/Notification.scss‎

Lines changed: 212 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,113 +3,277 @@
33
$block: '.#{variables.$ns}notification';
44

55
$notificationSourceIconSize: 36px;
6+
$notificationSourceIconGap: var(--g-spacing-3);
7+
$notificationLeftOffset: $notificationSourceIconSize + 12px;
8+
$notificationSourceLineHeight: 18px;
9+
$notificationSourceGap: var(--g-spacing-1);
10+
$notificationSourceBlockSize: $notificationSourceLineHeight + 4px;
11+
$notificationSideActionsWidth: 36px;
12+
$notificationSideActionsGap: var(--g-spacing-2);
13+
$notificationSideActionsOffset: $notificationSideActionsWidth + 8px;
614

715
#{$block} {
8-
display: flex;
9-
padding: 12px;
10-
gap: 12px;
11-
border-radius: 4px;
16+
position: relative;
17+
display: block;
18+
border-radius: var(--g-spacing-1);
1219
box-sizing: border-box;
1320
width: 100%;
1421
font: inherit;
1522
color: inherit;
16-
text-decoration: none;
23+
24+
background-color: var(--g-color-base-background);
25+
26+
&__clickable {
27+
display: block;
28+
width: 100%;
29+
padding: var(--g-spacing-3);
30+
box-sizing: border-box;
31+
color: inherit;
32+
text-decoration: none;
33+
border-radius: var(--g-spacing-1);
34+
35+
appearance: none;
36+
background: transparent;
37+
border: 0;
38+
margin: 0;
39+
font: inherit;
40+
text-align: inherit;
41+
outline-offset: var(--g-spacing-half);
42+
}
43+
44+
&__clickable_active {
45+
cursor: pointer;
46+
}
1747

1848
&_active:hover {
1949
background: var(--g-color-base-simple-hover);
20-
cursor: pointer;
2150
}
2251

23-
&__right {
24-
flex: 1;
52+
&__clickable_has-left {
53+
padding-inline-start: calc(var(--g-spacing-3) + #{$notificationLeftOffset});
2554
}
2655

27-
&__title-wrapper {
28-
flex: 1;
29-
min-width: 0;
30-
overflow-x: hidden;
56+
&__clickable_has-side-actions {
57+
padding-inline-end: calc(var(--g-spacing-3) + #{$notificationSideActionsOffset});
3158
}
3259

33-
&__source-text,
34-
&__title {
35-
overflow: hidden;
36-
text-overflow: ellipsis;
37-
white-space: nowrap;
60+
&__clickable_has-source-top {
61+
padding-block: calc(var(--g-spacing-2) + #{$notificationSourceBlockSize}) var(--g-spacing-4);
3862
}
3963

40-
&__source-text {
41-
color: var(--g-color-text-secondary);
64+
&__clickable_has-source-bottom {
65+
padding-block-end: calc(var(--g-spacing-3) + #{$notificationSourceBlockSize});
4266
}
4367

44-
&__bottom-source {
45-
margin-block-start: 4px;
68+
&__clickable_has-bottom-actions {
69+
padding-block-end: calc(var(--g-spacing-3) + 36px + var(--g-spacing-2));
70+
}
71+
72+
&__clickable_has-source-bottom#{&}__clickable_has-bottom-actions {
73+
padding-block-end: calc(
74+
var(--g-spacing-3) + #{$notificationSourceBlockSize} + 28px + var(--g-spacing-2)
75+
);
76+
}
77+
78+
&__clickable_has-source-top#{&}__clickable_has-bottom-actions {
79+
padding-block-end: calc(var(--g-spacing-6) + #{$notificationSourceBlockSize});
80+
}
81+
82+
&__main-content {
83+
display: flex;
84+
flex-direction: column;
85+
min-width: 0;
86+
}
87+
88+
&__title-wrapper {
89+
display: flex;
90+
align-items: center;
91+
min-width: 0;
92+
height: var(--g-spacing-7);
93+
}
94+
95+
&_has-source-top &__title-wrapper {
96+
height: auto;
97+
98+
margin: var(--g-spacing-1) 0 var(--g-spacing-1) 0;
4699
}
47100

48101
&__title {
49102
font-weight: 500;
50-
color: var(--g-color-text-primary);
103+
margin: 0;
104+
padding: 0;
105+
106+
overflow: hidden;
107+
text-overflow: ellipsis;
108+
white-space: nowrap;
51109
}
52110

53-
&__title-with-source {
54-
margin-block-end: 4px;
111+
&__content-wrapper {
112+
min-height: var(--g-spacing-7);
113+
114+
display: flex;
115+
align-items: center;
116+
min-width: 0;
55117
}
56118

57119
&__content {
58120
font-size: 13px;
59121
line-height: 18px;
60-
61122
color: var(--g-color-text-complementary);
62-
}
63123

64-
&_unread {
65-
background: var(--g-color-base-selection);
66-
&:hover {
67-
background: var(--g-color-base-selection-hover);
68-
}
124+
word-break: break-word;
125+
overflow-wrap: anywhere;
69126
}
70127

71-
&__actions {
128+
&__left {
129+
position: absolute;
130+
inset-block-start: var(--g-spacing-3);
131+
inset-inline-start: var(--g-spacing-3);
72132
display: flex;
73133
align-items: center;
134+
min-height: var(--g-spacing-7);
135+
z-index: 1;
74136
}
75137

76-
&__actions_bottom-actions {
77-
margin-block-start: 8px;
78-
gap: 8px;
79-
flex-wrap: wrap;
138+
&__top-source,
139+
&__bottom-source {
140+
position: absolute;
141+
inset-inline: var(--g-spacing-3) var(--g-spacing-3);
142+
z-index: 1;
143+
width: fit-content;
144+
}
145+
146+
&__top-source {
147+
inset-block-start: var(--g-spacing-3);
148+
}
149+
150+
&__bottom-source {
151+
inset-block-end: var(--g-spacing-3);
152+
}
153+
154+
&__source-text {
155+
overflow: hidden;
156+
text-overflow: ellipsis;
157+
white-space: nowrap;
158+
color: var(--g-color-text-secondary);
159+
160+
display: inline-flex;
161+
gap: var(--g-spacing-1);
162+
}
163+
164+
&__right-source-title {
165+
pointer-events: auto;
166+
position: relative;
80167
}
81168

82169
&__actions_side-actions {
83-
height: 28px;
170+
position: absolute;
171+
inset-block-start: var(--g-spacing-2);
172+
inset-inline-end: var(--g-spacing-3);
173+
z-index: 1;
174+
175+
display: flex;
176+
flex-direction: column;
177+
align-items: center;
178+
gap: var(--g-spacing-1);
179+
84180
opacity: 0;
181+
transition: opacity 0.1s ease-in-out;
85182
}
86-
&:hover &__actions_side-actions,
183+
184+
#{$block}:hover &__actions_side-actions,
185+
#{$block}:focus-within &__actions_side-actions,
87186
&__actions_side-actions:focus-within {
88187
opacity: 1;
89188
}
189+
190+
&__actions_side-actions,
191+
&__actions_bottom-actions {
192+
background: transparent;
193+
}
194+
90195
&_mobile &__actions_side-actions {
91196
opacity: 1;
92197
}
93198

94-
&__action_icon {
95-
color: var(--g-color-text-secondary);
199+
&__actions_bottom-actions {
200+
position: absolute;
201+
inset-inline: var(--g-spacing-3) var(--g-spacing-3);
202+
z-index: 1;
203+
204+
display: flex;
205+
align-items: center;
206+
gap: var(--g-spacing-2);
207+
flex-wrap: wrap;
208+
}
209+
210+
&_has-left &__top-source,
211+
&_has-left &__bottom-source,
212+
&_has-left &__actions_bottom-actions {
213+
inset-inline-start: calc(var(--g-spacing-3) + #{$notificationLeftOffset});
214+
}
215+
216+
&_has-source-top &__actions_bottom-actions {
217+
inset-block-end: var(--g-spacing-3);
218+
}
219+
220+
&_has-side-actions &__top-source {
221+
inset-inline-end: calc(var(--g-spacing-3) + #{$notificationSideActionsOffset});
222+
}
223+
224+
&_has-bottom-actions &__bottom-source {
225+
inset-block-end: calc(var(--g-spacing-2) + var(--g-spacing-10));
226+
}
227+
228+
&_has-source-bottom &__actions_bottom-actions {
229+
inset-block-end: var(--g-spacing-3);
230+
}
231+
232+
&_unread {
233+
background: var(--g-color-base-selection);
234+
}
235+
236+
&_unread#{&}_active:hover {
237+
background: var(--g-color-base-selection-hover);
96238
}
97239

98240
&_theme_success {
99-
border-inline-start: 4px solid var(--g-color-line-positive);
241+
border-inline-start: var(--g-spacing-1) solid var(--g-color-line-positive);
100242
}
101243
&_theme_info {
102-
border-inline-start: 4px solid var(--g-color-line-info);
244+
border-inline-start: var(--g-spacing-1) solid var(--g-color-line-info);
103245
}
104246
&_theme_warning {
105-
border-inline-start: 4px solid var(--g-color-line-warning);
247+
border-inline-start: var(--g-spacing-1) solid var(--g-color-line-warning);
106248
}
107249
&_theme_danger {
108-
border-inline-start: 4px solid var(--g-color-line-danger);
250+
border-inline-start: var(--g-spacing-1) solid var(--g-color-line-danger);
109251
}
110252

111-
&_active {
112-
cursor: pointer;
253+
&__action_icon {
254+
color: var(--g-color-text-secondary);
255+
}
256+
257+
&__actions {
258+
display: flex;
259+
align-items: center;
260+
}
261+
262+
&__source-icon {
263+
width: 36px;
264+
height: 36px;
265+
}
266+
267+
&__visually-hidden {
268+
position: absolute;
269+
width: 1px;
270+
height: 1px;
271+
margin: -1px;
272+
padding: 0;
273+
overflow: hidden;
274+
clip: rect(0, 0, 0, 0);
275+
white-space: nowrap;
276+
border-width: 0;
113277
}
114278

115279
&__swipe-wrap {
@@ -142,7 +306,7 @@ $notificationSourceIconSize: 36px;
142306

143307
&__swipe-action {
144308
display: flex;
145-
gap: 8px;
309+
gap: var(--g-spacing-2);
146310
align-items: center;
147311
justify-content: center;
148312
height: 100%;
@@ -180,17 +344,12 @@ $notificationSourceIconSize: 36px;
180344
}
181345

182346
&__swipe-action-icon {
183-
padding: 8px;
347+
padding: var(--g-spacing-2);
184348
border-radius: 100%;
185349
color: var(--g-color-base-background);
186350
}
187351

188352
&__swipe-action-text {
189353
font-size: 16px;
190354
}
191-
192-
&__source-icon {
193-
width: 36px;
194-
height: 36px;
195-
}
196355
}

0 commit comments

Comments
 (0)