Skip to content

Commit a5f4d37

Browse files
juanmitriattijuanmitriatti
committed
feat(unity-bootstrap-theme): added visually-hidden text for Tags
UDS-1926
1 parent 1006096 commit a5f4d37

File tree

2 files changed

+81
-54
lines changed

2 files changed

+81
-54
lines changed

‎packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js‎

Lines changed: 77 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -172,14 +172,16 @@ export const cardTags = () => (
172172
<div className="card">
173173
<div className="card-header"></div>
174174
<div className="card-tags">
175+
<h3 className="visually-hidden">Tags:</h3>
175176
<a className="btn btn-tag btn-tag-alt-white" href="#">
176177
test tag
178+
<span className="visually-hidden"> tag</span>
177179
</a>
178180
<a className="btn btn-tag btn-tag-alt-white" href="#">
179-
test tag 2
181+
test tag 2<span className="visually-hidden"> tag</span>
180182
</a>
181183
<a className="btn btn-tag btn-tag-alt-white" href="#">
182-
test tag 3
184+
test tag 3<span className="visually-hidden"> tag</span>
183185
</a>
184186
</div>
185187
</div>
@@ -193,14 +195,24 @@ export const cardTags = () => (
193195
background class too.
194196
</div>
195197
<div className="card-tags">
196-
<span className="badge text-bg-gray-2">No button class</span>
197-
<span className="badge text-bg-gray-2">No hover effects</span>
198-
<span className="badge text-bg-gray-7">Dark mode</span>
198+
<h3 className="visually-hidden">Tags:</h3>
199+
<span className="badge text-bg-gray-2">
200+
No button class
201+
<span className="visually-hidden"> tag</span>
202+
</span>
203+
<span className="badge text-bg-gray-2">
204+
No hover effects
205+
<span className="visually-hidden"> tag</span>
206+
</span>
207+
<span className="badge text-bg-gray-7">
208+
Dark mode
209+
<span className="visually-hidden"> tag</span>
210+
</span>
199211
</div>
200212
</div>
201213
</div>
202214
);
203-
cardTags.decorators = [ defaultDecorator ];
215+
cardTags.decorators = [defaultDecorator];
204216

205217
export const cardDegree = () => (
206218
<div className="card card-degree">
@@ -259,19 +271,20 @@ export const cardDegree = () => (
259271
</a>
260272
</div>
261273
<div className="card-tags">
274+
<h3 className="visually-hidden">Tags:</h3>
262275
<a className="btn btn-tag btn-tag-alt-white" href="#">
263-
test tag
276+
test tag<span className="visually-hidden"> tag</span>
264277
</a>
265278
<a className="btn btn-tag btn-tag-alt-white" href="#">
266-
test tag 2
279+
test tag 2<span className="visually-hidden"> tag</span>
267280
</a>
268281
<a className="btn btn-tag btn-tag-alt-white" href="#">
269-
test tag 3
282+
test tag 3<span className="visually-hidden"> tag</span>
270283
</a>
271284
</div>
272285
</div>
273286
);
274-
cardDegree.decorators = [ defaultDecorator ];
287+
cardDegree.decorators = [defaultDecorator];
275288

276289
export const cardStory = () => (
277290
<div className="card card-story">
@@ -330,33 +343,34 @@ export const cardStory = () => (
330343
</a>
331344
</div>
332345
<div className="card-tags">
346+
<h3 className="visually-hidden">Tags:</h3>
333347
<a className="btn btn-tag btn-tag-alt-white" href="#">
334-
test tag
348+
test tag<span className="visually-hidden"> tag</span>
335349
</a>
336350
<a className="btn btn-tag btn-tag-alt-white" href="#">
337-
test tag 2
351+
test tag 2<span className="visually-hidden"> tag</span>
338352
</a>
339353
<a className="btn btn-tag btn-tag-alt-white" href="#">
340-
test tag 3
354+
test tag 3<span className="visually-hidden"> tag</span>
341355
</a>
342356
</div>
343357
</div>
344358
);
345-
cardStory.decorators = [ defaultDecorator ];
359+
cardStory.decorators = [defaultDecorator];
346360

347361
export const cardEvent = () => (
348362
<div className="card card-event">
349363
<a href="#">
350-
<img
351-
className="card-img-top"
352-
src={cardsImage}
353-
alt="Card image cap"
354-
width="600"
355-
height="337"
356-
loading="lazy"
357-
decoding="async"
358-
fetchpriority="high"
359-
/>
364+
<img
365+
className="card-img-top"
366+
src={cardsImage}
367+
alt="Card image cap"
368+
width="600"
369+
height="337"
370+
loading="lazy"
371+
decoding="async"
372+
fetchpriority="high"
373+
/>
360374
</a>
361375
<div className="card-header">
362376
<h3 className="card-title">
@@ -417,19 +431,20 @@ export const cardEvent = () => (
417431
</a>
418432
</div>
419433
<div className="card-tags">
434+
<h3 className="visually-hidden">Tags:</h3>
420435
<a className="btn btn-tag btn-tag-alt-white" href="#">
421-
test tag
436+
test tag<span className="visually-hidden"> tag</span>
422437
</a>
423438
<a className="btn btn-tag btn-tag-alt-white" href="#">
424-
test tag 2
439+
test tag 2<span className="visually-hidden"> tag</span>
425440
</a>
426441
<a className="btn btn-tag btn-tag-alt-white" href="#">
427-
test tag 3
442+
test tag 3<span className="visually-hidden"> tag</span>
428443
</a>
429444
</div>
430445
</div>
431446
);
432-
cardEvent.decorators = [ defaultDecorator ];
447+
cardEvent.decorators = [defaultDecorator];
433448

434449
export const cardVariations = () => (
435450
<div>
@@ -515,14 +530,15 @@ export const cardVariations = () => (
515530
</a>
516531
</div>
517532
<div className="card-tags">
533+
<h3 className="visually-hidden">Tags:</h3>
518534
<a className="btn btn-tag btn-tag-alt-white" href="#">
519-
test tag
535+
test tag<span className="visually-hidden"> tag</span>
520536
</a>
521537
<a className="btn btn-tag btn-tag-alt-white" href="#">
522-
test tag 2
538+
test tag 2<span className="visually-hidden"> tag</span>
523539
</a>
524540
<a className="btn btn-tag btn-tag-alt-white" href="#">
525-
test tag 3
541+
test tag 3<span className="visually-hidden"> tag</span>
526542
</a>
527543
</div>
528544
</div>
@@ -561,14 +577,15 @@ export const cardVariations = () => (
561577
</a>
562578
</div>
563579
<div className="card-tags">
580+
<h3 className="visually-hidden">Tags:</h3>
564581
<a className="btn btn-tag btn-tag-alt-white" href="#">
565-
test tag
582+
test tag<span className="visually-hidden"> tag</span>
566583
</a>
567584
<a className="btn btn-tag btn-tag-alt-white" href="#">
568-
test tag 2
585+
test tag 2<span className="visually-hidden"> tag</span>
569586
</a>
570587
<a className="btn btn-tag btn-tag-alt-white" href="#">
571-
test tag 3
588+
test tag 3<span className="visually-hidden"> tag</span>
572589
</a>
573590
</div>
574591
</div>
@@ -624,14 +641,15 @@ export const cardVariations = () => (
624641
</div>
625642
</div>
626643
<div className="card-tags">
644+
<h3 className="visually-hidden">Tags:</h3>
627645
<a className="btn btn-tag btn-tag-alt-white" href="#">
628-
test tag
646+
test tag<span className="visually-hidden"> tag</span>
629647
</a>
630648
<a className="btn btn-tag btn-tag-alt-white" href="#">
631-
test tag 2
649+
test tag 2<span className="visually-hidden"> tag</span>
632650
</a>
633651
<a className="btn btn-tag btn-tag-alt-white" href="#">
634-
test tag 3
652+
test tag 3<span className="visually-hidden"> tag</span>
635653
</a>
636654
</div>
637655
</div>
@@ -777,14 +795,15 @@ export const cardVariations = () => (
777795
</a>
778796
</div>
779797
<div className="card-tags">
798+
<h3 className="visually-hidden">Tags:</h3>
780799
<a className="btn btn-tag btn-tag-alt-white" href="#">
781-
test tag
800+
test tag<span className="visually-hidden"> tag</span>
782801
</a>
783802
<a className="btn btn-tag btn-tag-alt-white" href="#">
784-
test tag 2
803+
test tag 2<span className="visually-hidden"> tag</span>
785804
</a>
786805
<a className="btn btn-tag btn-tag-alt-white" href="#">
787-
test tag 3
806+
test tag 3<span className="visually-hidden"> tag</span>
788807
</a>
789808
</div>
790809
</div>
@@ -1128,19 +1147,20 @@ export const checkboxStackedCard = () => (
11281147
</a>
11291148
</div>
11301149
<div className="card-tags">
1150+
<h3 className="visually-hidden">Tags:</h3>
11311151
<a className="btn btn-tag btn-tag-alt-white" href="#">
1132-
test tag
1152+
test tag<span className="visually-hidden"> tag</span>
11331153
</a>
11341154
<a className="btn btn-tag btn-tag-alt-white" href="#">
1135-
test tag 2
1155+
test tag 2<span className="visually-hidden"> tag</span>
11361156
</a>
11371157
<a className="btn btn-tag btn-tag-alt-white" href="#">
1138-
test tag 3
1158+
test tag 3<span className="visually-hidden"> tag</span>
11391159
</a>
11401160
</div>
11411161
</div>
11421162
);
1143-
checkboxStackedCard.decorators = [ defaultDecorator ];
1163+
checkboxStackedCard.decorators = [defaultDecorator];
11441164

11451165
export const checkboxInlineCard = () => (
11461166
<div className="card card-checkbox-inline">
@@ -1230,19 +1250,20 @@ export const checkboxInlineCard = () => (
12301250
</a>
12311251
</div>
12321252
<div className="card-tags">
1253+
<h3 className="visually-hidden">Tags:</h3>
12331254
<a className="btn btn-tag btn-tag-alt-white" href="#">
1234-
test tag
1255+
test tag<span className="visually-hidden"> tag</span>
12351256
</a>
12361257
<a className="btn btn-tag btn-tag-alt-white" href="#">
1237-
test tag 2
1258+
test tag 2<span className="visually-hidden"> tag</span>
12381259
</a>
12391260
<a className="btn btn-tag btn-tag-alt-white" href="#">
1240-
test tag 3
1261+
test tag 3<span className="visually-hidden"> tag</span>
12411262
</a>
12421263
</div>
12431264
</div>
12441265
);
1245-
checkboxInlineCard.decorators = [ defaultDecorator ];
1266+
checkboxInlineCard.decorators = [defaultDecorator];
12461267

12471268
export const mediaTypeOverlayCard = () => (
12481269
<div className="container">
@@ -1314,14 +1335,15 @@ export const mediaTypeOverlayCard = () => (
13141335
</a>
13151336
</div>
13161337
<div className="card-tags">
1338+
<h3 className="visually-hidden">Tags:</h3>
13171339
<a className="btn btn-tag btn-tag-alt-white" href="#">
1318-
test tag
1340+
test tag<span className="visually-hidden"> tag</span>
13191341
</a>
13201342
<a className="btn btn-tag btn-tag-alt-white" href="#">
1321-
test tag 2
1343+
test tag 2<span className="visually-hidden"> tag</span>
13221344
</a>
13231345
<a className="btn btn-tag btn-tag-alt-white" href="#">
1324-
test tag 3
1346+
test tag 3<span className="visually-hidden"> tag</span>
13251347
</a>
13261348
</div>
13271349
</div>
@@ -1393,14 +1415,15 @@ export const mediaTypeOverlayCard = () => (
13931415
</a>
13941416
</div>
13951417
<div className="card-tags">
1418+
<h3 className="visually-hidden">Tags:</h3>
13961419
<a className="btn btn-tag btn-tag-alt-white" href="#">
1397-
test tag
1420+
test tag<span className="visually-hidden"> tag</span>
13981421
</a>
13991422
<a className="btn btn-tag btn-tag-alt-white" href="#">
1400-
test tag 2
1423+
test tag 2<span className="visually-hidden"> tag</span>
14011424
</a>
14021425
<a className="btn btn-tag btn-tag-alt-white" href="#">
1403-
test tag 3
1426+
test tag 3<span className="visually-hidden"> tag</span>
14041427
</a>
14051428
</div>
14061429
</div>

‎packages/unity-bootstrap-theme/stories/molecules/cards/cards.templates.stories.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,14 +144,18 @@ export const cardNoTemplates = args => {
144144
)}
145145
{args.tags && (
146146
<div className="card-tags">
147+
<h3 className="visually-hidden">Tags:</h3>
147148
<a className="btn btn-tag btn-tag-alt-white" href="#">
148149
test tag
150+
<span className="visually-hidden"> tag</span>
149151
</a>
150152
<a className="btn btn-tag btn-tag-alt-white" href="#">
151153
test tag 2
154+
<span className="visually-hidden"> tag</span>
152155
</a>
153156
<a className="btn btn-tag btn-tag-alt-white" href="#">
154157
test tag 3
158+
<span className="visually-hidden"> tag</span>
155159
</a>
156160
</div>
157161
)}

0 commit comments

Comments
 (0)