skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
69
comments
6%
failed
4
coverage
48%

PagingTable

avatar of atanasster

Table component with pagination, filtering, footer, child rows and grouping. Derived from https://github.com/react-tools/react-table.

Tests results

Status
Full name
Title
Time(ms)
PagingTable.test.ts(4 tests)
failed
PagingTable > main
snapshot
872
failed
PagingTable > main
accessibility
3612
failed
PagingTable > simple
snapshot
531
failed
PagingTable > simple
accessibility
2316
total 4 tests

Tests coverage

Kind
Total
Covered
Skipped
%
PagingTable.tsx
lines
28
20
0
71.43%
functions
5
5
0
100%
statements
30
22
0
73.33%
branches
31
15
0
48.39%

A11y tests

Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44
 
impact
id
description
critical
button-name

Ensures buttons have discernible text...

summary
target
Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .sc-hiKfDv.dRsyqq > .lJqml.sc-dIsUp.jEEywD > .sc-ksluID.kFmqyc.dZPhst:nth-child(2) > .itMhhB.sc-bkbkJK.hmwLYg > .gcwNod.kEOOzN.sc-fnVZcZ:nth-child(2) > .hMsmXN.StyledBox-sc-13pk1d4-0 > .jpchgt.StyledBox-sc-13pk1d4-0
Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .sc-hiKfDv.dRsyqq > .lJqml.sc-dIsUp.jEEywD > .sc-ksluID.kFmqyc.dZPhst:nth-child(2) > .itMhhB.sc-bkbkJK.hmwLYg > .gcwNod.kEOOzN.sc-fnVZcZ:nth-child(3) > .dQtleQ.StyledBox-sc-13pk1d4-0 > .jpchgt.StyledBox-sc-13pk1d4-0
Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .sc-hiKfDv.dRsyqq > .lJqml.sc-dIsUp.jEEywD > .sc-ksluID.kFmqyc.dZPhst:nth-child(2) > .itMhhB.sc-bkbkJK.hmwLYg > .gcwNod.kEOOzN.sc-fnVZcZ:nth-child(4) > .dQtleQ.StyledBox-sc-13pk1d4-0 > .jpchgt.StyledBox-sc-13pk1d4-0
Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .sc-hiKfDv.dRsyqq > .lJqml.sc-dIsUp.jEEywD > .sc-ksluID.kFmqyc.dZPhst:nth-child(2) > .itMhhB.sc-bkbkJK.hmwLYg > .gcwNod.kEOOzN.sc-fnVZcZ:nth-child(5) > .dQtleQ.StyledBox-sc-13pk1d4-0 > .jpchgt.StyledBox-sc-13pk1d4-0
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 2.26 (foreground color: #7d4cdb, background color: #fd6fff, font size: 19.5pt (26px), font weight: normal). Expected contrast ratio of 3:1
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .sc-hiKfDv.dRsyqq > .lJqml.sc-dIsUp.jEEywD > .sc-hHEiqL.ccTnQh.dZPhst > .itMhhB.sc-bkbkJK.hmwLYg > .sc-iemWCZ.fGkTWG[role="gridcell"]:nth-child(5) > .iZwmDs.StyledBox-sc-13pk1d4-0
critical
label

Ensures every form element has a label...

summary
target
Fix any of the following: Form element does not have an implicit (wrapped) <label> Form element does not have an explicit <label> aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element has no placeholder attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .hegnTR.StyledBox-sc-13pk1d4-0 > .dFLruc.StyledBox-sc-13pk1d4-0 > .Select__StyledSelectDropButton-sc-17idtfo-2.edPNuO[aria-label="Open\ Drop"] > .iIJgxh.StyledBox-sc-13pk1d4-0 > .kvMEsT.StyledBox-sc-13pk1d4-0 > .StyledTextInput__StyledTextInputContainer-sc-1x30a0s-1.hFfBtv
serious
nested-interactive

Nested interactive controls are not announced by screen readers...

summary
target
Fix any of the following: Element has focusable descendants
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .dKUzmy.StyledBox-sc-13pk1d4-0 > .hegnTR.StyledBox-sc-13pk1d4-0 > .dFLruc.StyledBox-sc-13pk1d4-0

Viewport

Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44
320px
Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44
375px
Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44
768px
Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44
1024px
Previous
controls/Notification
Next
controls/Spinning