created:4/29/2021
updated:4/29/2021
loc
71
comments
24%
passed
26
coverage
79%

Shield

avatar of atanasster

A container component to display label/value pairs, where the value is colord. Similar design to github shields.

Tests results

Status
Full name
Title
Time(ms)
Shield.test.ts(26 tests)
passed
Shield > overview > 1
snapshot
71
passed
Shield > overview > 1
accessibility
145
passed
Shield > overview > 2
snapshot
55
passed
Shield > overview > 2
accessibility
123
passed
Shield > overview > 3
snapshot
146
passed
Shield > overview > 3
accessibility
333
passed
Shield > overview > 4
snapshot
75
passed
Shield > overview > 4
accessibility
107
passed
Shield > overview > 5
snapshot
59
total 26 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Shield.tsx
lines
23
21
0
91.3%
functions
1
1
0
100%
statements
24
22
0
91.66%
branches
24
19
0
79.16%

A11y tests

zero
80%
 
impact
id
description
serious
color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

summary
target
Fix any of the following: Element has insufficient color contrast of 3.33 (foreground color: #ffffff, background color: #6d994a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-ncjsai

Viewport

zero
80%
320px
zero
80%
375px
zero
80%
768px
zero
80%
1024px