created:4/29/2021
updated:4/29/2021
loc
17
comments
41%
passed
10
coverage
50%

Collapsible

avatar of atanasster

Animated expand/collapse container component, using react-animate-height.

Overview

Test data

select
#
easing
1
ease-out
2
ease-in
3
ease
4
ease-in
5
ease-out
5 data rows

Controls

Name
Description
Default
Controls
easing
string
-

Tests results

Status
Full name
Title
Time(ms)
Collapsible.test.ts(10 tests)
passed
Collapsible > overview > 1
snapshot
92
passed
Collapsible > overview > 1
accessibility
211
passed
Collapsible > overview > 2
snapshot
39
passed
Collapsible > overview > 2
accessibility
152
passed
Collapsible > overview > 3
snapshot
61
passed
Collapsible > overview > 3
accessibility
167
passed
Collapsible > overview > 4
snapshot
64
passed
Collapsible > overview > 4
accessibility
180
passed
Collapsible > overview > 5
snapshot
83
total 10 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Collapsible.tsx
lines
6
6
0
100%
functions
1
1
0
100%
statements
7
7
0
100%
branches
4
2
0
50%

A11y tests

 
id
description
aria-hidden-focus

Ensures aria-hidden elements do not contain focusable elements...

button-name

Ensures buttons have discernible text...

color-contrast

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

nested-interactive

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

Viewport

320px
375px
768px
1024px