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
283
passed
StorySource > overview
accessibility
544
passed
StorySource > theme
snapshot
107
passed
StorySource > theme
accessibility
564
passed
StorySource > themeSelector
snapshot
93
passed
StorySource > themeSelector
accessibility
483
passed
StorySource > customTitle
snapshot
62
passed
StorySource > customTitle
accessibility
413
passed
StorySource > notCollapsible
snapshot
40
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