created:3/5/2021
updated:3/5/2021
loc
42
comments
26%
passed
12
coverage
75%

StorySource

avatar of atanasster

Display source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.

Tests results

Status
Full name
Title
Time(ms)
StorySource.test.ts(12 tests)
passed
StorySource > overview
snapshot
316
passed
StorySource > overview
accessibility
1222
passed
StorySource > theme
snapshot
159
passed
StorySource > theme
accessibility
846
passed
StorySource > themeSelector
snapshot
220
passed
StorySource > themeSelector
accessibility
870
passed
StorySource > customTitle
snapshot
68
passed
StorySource > customTitle
accessibility
553
passed
StorySource > notCollapsible
snapshot
70
total 12 tests

Tests coverage

Kind
Total
Covered
Skipped
%
StorySource.tsx
lines
11
11
0
100%
functions
1
1
0
100%
statements
12
12
0
100%
branches
4
3
0
75%

A11y tests

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);
 
id
description
aria-allowed-attr

Ensures ARIA attributes are allowed for an element's role...

aria-valid-attr-value

Ensures all ARIA attributes have valid values...

aria-valid-attr

Ensures attributes that begin with aria- are valid ARIA attributes...

avoid-inline-spacing

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets...

button-name

Ensures buttons have discernible text...

color-contrast

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

duplicate-id

Ensures every id attribute value is unique...

identical-links-same-purpose

Ensure that links with the same accessible name serve a similar purpose...

link-name

Ensures links have discernible text...

nested-interactive

Ensure controls are not nested as they are not announced by screen readers...

Viewport

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);
320px
({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);
375px
({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);
768px
({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);
1024px