created:3/5/2021
updated:3/5/2021
loc
51
comments
22%
passed
14
coverage
75%

PropsTable

avatar of atanasster

Displays the component's properties as well as configurable controls to interact with the component.

Tests results

Status
Full name
Title
Time(ms)
PropsTable.test.ts(14 tests)
passed
PropsTable > overview
snapshot
333
passed
PropsTable > overview
accessibility
1723
passed
PropsTable > subcomponents
snapshot
63
passed
PropsTable > subcomponents
accessibility
476
passed
PropsTable > extraColumns
snapshot
185
passed
PropsTable > extraColumns
accessibility
1705
passed
PropsTable > controls
snapshot
82
passed
PropsTable > controls
accessibility
631
passed
PropsTable > title
snapshot
69
total 14 tests

Tests coverage

Kind
Total
Covered
Skipped
%
PropsTable.tsx
lines
13
13
0
100%
functions
2
2
0
100%
statements
15
15
0
100%
branches
4
3
0
75%

A11y tests

Name
Description
Default
optionalArray
any[]
-
optionalArrayOf
number[]
-
optionalBool
boolean
-
optionalElement
any
-
optionalElementType
Element
-
optionalEnum
NewsPhotos
-
optionalFunc
(args: any) => any
-
optionalMessage
Message
-
optionalNode
any
-
optionalNumber
number
21
optionalObject
object
-
optionalObjectOf
{ [key: string]: number; }
-
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalString
string
-
optionalSymbol
symbol
-
optionalUnion
stringnumberMessage
-
requiredAny
any
-
requiredFunc
(prop: any) => any
-
 
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 4.1 (foreground color: #69768c, background color: #f2f2f2, font size: 10.5pt (14px), 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-1xkyebe[data-testid="propstable"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-1mgdhkm > div > .css-eqxzio > .css-1s6e3ix > tbody > .css-ijvt85:nth-child(6) > .css-1yjhfhu[role="cell"]:nth-child(2) > .css-uliqdc > .css-1tcjtkx > pre > .css-7eb4of:nth-child(1)
Fix any of the following: Element has insufficient color contrast of 4.1 (foreground color: #69768c, background color: #f2f2f2, font size: 10.5pt (14px), 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-1xkyebe[data-testid="propstable"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-1mgdhkm > div > .css-eqxzio > .css-1s6e3ix > tbody > .css-ijvt85:nth-child(6) > .css-1yjhfhu[role="cell"]:nth-child(2) > .css-uliqdc > .css-1tcjtkx > pre > .css-7eb4of:nth-child(2)
Fix any of the following: Element has insufficient color contrast of 4.1 (foreground color: #69768c, background color: #f2f2f2, font size: 10.5pt (14px), 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-1xkyebe[data-testid="propstable"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-1mgdhkm > div > .css-eqxzio > .css-1s6e3ix > tbody > .css-ijvt85:nth-child(17) > .css-1yjhfhu[role="cell"]:nth-child(2) > .css-uliqdc > .css-1tcjtkx > pre > .css-7eb4of:nth-child(1)
Fix any of the following: Element has insufficient color contrast of 4.1 (foreground color: #69768c, background color: #f2f2f2, font size: 10.5pt (14px), 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-1xkyebe[data-testid="propstable"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-1mgdhkm > div > .css-eqxzio > .css-1s6e3ix > tbody > .css-ijvt85:nth-child(17) > .css-1yjhfhu[role="cell"]:nth-child(2) > .css-uliqdc > .css-1tcjtkx > pre > .css-7eb4of:nth-child(2)
Fix any of the following: Element has insufficient color contrast of 4.1 (foreground color: #69768c, background color: #f2f2f2, font size: 10.5pt (14px), 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-1xkyebe[data-testid="propstable"] > .rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-1mgdhkm > div > .css-eqxzio > .css-1s6e3ix > tbody > .css-ijvt85:nth-child(17) > .css-1yjhfhu[role="cell"]:nth-child(2) > .css-uliqdc > .css-1tcjtkx > pre > .css-7eb4of:nth-child(3)

Viewport

Name
Description
Default
optionalArray
any[]
-
optionalArrayOf
number[]
-
optionalBool
boolean
-
optionalElement
any
-
optionalElementType
Element
-
optionalEnum
NewsPhotos
-
optionalFunc
(args: any) => any
-
optionalMessage
Message
-
optionalNode
any
-
optionalNumber
number
21
optionalObject
object
-
optionalObjectOf
{ [key: string]: number; }
-
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalString
string
-
optionalSymbol
symbol
-
optionalUnion
stringnumberMessage
-
requiredAny
any
-
requiredFunc
(prop: any) => any
-
320px
Name
Description
Default
optionalArray
any[]
-
optionalArrayOf
number[]
-
optionalBool
boolean
-
optionalElement
any
-
optionalElementType
Element
-
optionalEnum
NewsPhotos
-
optionalFunc
(args: any) => any
-
optionalMessage
Message
-
optionalNode
any
-
optionalNumber
number
21
optionalObject
object
-
optionalObjectOf
{ [key: string]: number; }
-
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalString
string
-
optionalSymbol
symbol
-
optionalUnion
stringnumberMessage
-
requiredAny
any
-
requiredFunc
(prop: any) => any
-
375px
Name
Description
Default
optionalArray
any[]
-
optionalArrayOf
number[]
-
optionalBool
boolean
-
optionalElement
any
-
optionalElementType
Element
-
optionalEnum
NewsPhotos
-
optionalFunc
(args: any) => any
-
optionalMessage
Message
-
optionalNode
any
-
optionalNumber
number
21
optionalObject
object
-
optionalObjectOf
{ [key: string]: number; }
-
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalString
string
-
optionalSymbol
symbol
-
optionalUnion
stringnumberMessage
-
requiredAny
any
-
requiredFunc
(prop: any) => any
-
768px
Name
Description
Default
optionalArray
any[]
-
optionalArrayOf
number[]
-
optionalBool
boolean
-
optionalElement
any
-
optionalElementType
Element
-
optionalEnum
NewsPhotos
-
optionalFunc
(args: any) => any
-
optionalMessage
Message
-
optionalNode
any
-
optionalNumber
number
21
optionalObject
object
-
optionalObjectOf
{ [key: string]: number; }
-
optionalObjectWithShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalObjectWithStrictShape
{ optionalProperty?: string; requiredProperty: number; }
-
optionalString
string
-
optionalSymbol
symbol
-
optionalUnion
stringnumberMessage
-
requiredAny
any
-
requiredFunc
(prop: any) => any
-
1024px