Skip to content

Commit 76d62c0

Browse files
dougfabrisdougfabris
authored
fix(fuselage): Add aria-hidden attribute to StatusBullet (#1951)
1 parent 5278873 commit 76d62c0

9 files changed

Lines changed: 238 additions & 6 deletions

File tree

‎.changeset/lucky-bugs-train.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': patch
3+
---
4+
5+
fix(fuselage): Add `aria-hidden` attribute to `StatusBullet`

‎packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
1+
import { composeStories } from '@storybook/react-webpack5';
2+
import { axe } from 'jest-axe';
3+
14
import { render } from '../../testing';
25

3-
import StatusBullet from './StatusBullet';
6+
import * as stories from './StatusBullet.stories';
7+
8+
const testCases = Object.values(composeStories(stories)).map((Story) => [
9+
Story.storyName || 'Story',
10+
Story,
11+
]);
12+
13+
test.each(testCases)(
14+
`renders %s without crashing`,
15+
async (_storyname, Story) => {
16+
const tree = render(<Story />);
17+
expect(tree.baseElement).toMatchSnapshot();
18+
},
19+
);
20+
21+
test.each(testCases)(
22+
'%s should have no a11y violations',
23+
async (_storyname, Story) => {
24+
const { container } = render(<Story />);
425

5-
describe('[StatusBullet Component]', () => {
6-
it('renders without crashing', () => {
7-
render(<StatusBullet />);
8-
});
9-
});
26+
const results = await axe(container);
27+
expect(results).toHaveNoViolations();
28+
},
29+
);

‎packages/fuselage/src/components/StatusBullet/__snapshots__/StatusBullet.spec.tsx.snap‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2+
3+
exports[`renders Default without crashing 1`] = `
4+
<body>
5+
<div>
6+
<div
7+
class="rcx-box rcx-box--full"
8+
>
9+
<svg
10+
aria-hidden="true"
11+
class="rcx-status-bullet rcx-status-bullet--online undefined "
12+
height="24"
13+
viewBox="0 0 24 24"
14+
width="24"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<path
18+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
19+
/>
20+
</svg>
21+
<svg
22+
aria-hidden="true"
23+
class="rcx-status-bullet rcx-status-bullet--away undefined "
24+
height="10"
25+
viewBox="0 0 10 10"
26+
width="10"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<path
30+
clip-rule="evenodd"
31+
d="M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM5.80004 2.33325C5.80004 1.96506 5.50156 1.66659 5.13337 1.66659C4.76518 1.66659 4.46671 1.96506 4.46671 2.33325V5.13325V5.45367L4.71691 5.65383L6.71691 7.25383C7.00442 7.48384 7.42395 7.43722 7.65395 7.14972C7.88396 6.86221 7.83735 6.44268 7.54984 6.21267L5.80004 4.81284V2.33325Z"
32+
fill-rule="evenodd"
33+
/>
34+
</svg>
35+
<svg
36+
aria-hidden="true"
37+
class="rcx-status-bullet rcx-status-bullet--busy undefined "
38+
height="10"
39+
viewBox="0 0 10 10"
40+
width="10"
41+
xmlns="http://www.w3.org/2000/svg"
42+
>
43+
<path
44+
clip-rule="evenodd"
45+
d="M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM3.53338 4.46655C3.16519 4.46655 2.86671 4.76503 2.86671 5.13322C2.86671 5.50141 3.16519 5.79989 3.53338 5.79989H6.73338C7.10157 5.79989 7.40004 5.50141 7.40004 5.13322C7.40004 4.76503 7.10157 4.46655 6.73338 4.46655H3.53338Z"
46+
fill-rule="evenodd"
47+
/>
48+
</svg>
49+
<svg
50+
aria-hidden="true"
51+
class="rcx-status-bullet rcx-status-bullet--disabled undefined "
52+
height="24"
53+
viewBox="0 0 24 24"
54+
width="24"
55+
xmlns="http://www.w3.org/2000/svg"
56+
>
57+
<path
58+
clip-rule="evenodd"
59+
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM13.3367 5.33333C13.3367 4.59695 12.7398 4 12.0034 4C11.267 4 10.67 4.59695 10.67 5.33333V14.6667C10.67 15.403 11.267 16 12.0034 16C12.7398 16 13.3367 15.403 13.3367 14.6667V5.33333ZM13.3367 18.6667C13.3367 17.9303 12.7398 17.3333 12.0034 17.3333C11.267 17.3333 10.67 17.9303 10.67 18.6667C10.67 19.403 11.267 20 12.0034 20C12.7398 20 13.3367 19.403 13.3367 18.6667Z"
60+
fill-rule="evenodd"
61+
/>
62+
</svg>
63+
<svg
64+
aria-hidden="true"
65+
class="rcx-status-bullet rcx-status-bullet--offline undefined "
66+
fill="none"
67+
height="12"
68+
viewBox="0 0 12 12"
69+
width="12"
70+
xmlns="http://www.w3.org/2000/svg"
71+
>
72+
<circle
73+
class="rcx-status-bullet rcx-status-bullet--offline"
74+
cx="6"
75+
cy="6"
76+
r="5"
77+
stroke-width="2"
78+
/>
79+
</svg>
80+
<svg
81+
aria-hidden="true"
82+
class="rcx-status-bullet rcx-status-bullet--loading undefined "
83+
fill="none"
84+
height="12"
85+
viewBox="0 0 12 12"
86+
width="12"
87+
xmlns="http://www.w3.org/2000/svg"
88+
>
89+
<circle
90+
class="rcx-status-bullet rcx-status-bullet--loading"
91+
cx="6"
92+
cy="6"
93+
r="5"
94+
stroke-dasharray="2 2"
95+
stroke-width="2"
96+
/>
97+
</svg>
98+
</div>
99+
</div>
100+
</body>
101+
`;
102+
103+
exports[`renders Small without crashing 1`] = `
104+
<body>
105+
<div>
106+
<div
107+
class="rcx-box rcx-box--full"
108+
>
109+
<svg
110+
aria-hidden="true"
111+
class="rcx-status-bullet rcx-status-bullet--online undefined rcx-status-bullet--small"
112+
height="24"
113+
viewBox="0 0 24 24"
114+
width="24"
115+
xmlns="http://www.w3.org/2000/svg"
116+
>
117+
<path
118+
d="M24 12.0001C24 18.6275 18.6274 24.0001 12 24.0001C5.37255 24.0001 -3.05176e-05 18.6275 -3.05176e-05 12.0001C-3.05176e-05 5.37271 5.37255 0.00012207 12 0.00012207C18.6274 0.00012207 24 5.37271 24 12.0001Z"
119+
/>
120+
</svg>
121+
<svg
122+
aria-hidden="true"
123+
class="rcx-status-bullet rcx-status-bullet--away undefined rcx-status-bullet--small"
124+
height="10"
125+
viewBox="0 0 10 10"
126+
width="10"
127+
xmlns="http://www.w3.org/2000/svg"
128+
>
129+
<path
130+
clip-rule="evenodd"
131+
d="M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM5.80004 2.33325C5.80004 1.96506 5.50156 1.66659 5.13337 1.66659C4.76518 1.66659 4.46671 1.96506 4.46671 2.33325V5.13325V5.45367L4.71691 5.65383L6.71691 7.25383C7.00442 7.48384 7.42395 7.43722 7.65395 7.14972C7.88396 6.86221 7.83735 6.44268 7.54984 6.21267L5.80004 4.81284V2.33325Z"
132+
fill-rule="evenodd"
133+
/>
134+
</svg>
135+
<svg
136+
aria-hidden="true"
137+
class="rcx-status-bullet rcx-status-bullet--busy undefined rcx-status-bullet--small"
138+
height="10"
139+
viewBox="0 0 10 10"
140+
width="10"
141+
xmlns="http://www.w3.org/2000/svg"
142+
>
143+
<path
144+
clip-rule="evenodd"
145+
d="M5.13337 9.93325C7.78434 9.93325 9.93338 7.78422 9.93338 5.13325C9.93338 2.48229 7.78434 0.333252 5.13337 0.333252C2.48241 0.333252 0.333374 2.48229 0.333374 5.13325C0.333374 7.78422 2.48241 9.93325 5.13337 9.93325ZM3.53338 4.46655C3.16519 4.46655 2.86671 4.76503 2.86671 5.13322C2.86671 5.50141 3.16519 5.79989 3.53338 5.79989H6.73338C7.10157 5.79989 7.40004 5.50141 7.40004 5.13322C7.40004 4.76503 7.10157 4.46655 6.73338 4.46655H3.53338Z"
146+
fill-rule="evenodd"
147+
/>
148+
</svg>
149+
<svg
150+
aria-hidden="true"
151+
class="rcx-status-bullet rcx-status-bullet--disabled undefined rcx-status-bullet--small"
152+
height="24"
153+
viewBox="0 0 24 24"
154+
width="24"
155+
xmlns="http://www.w3.org/2000/svg"
156+
>
157+
<path
158+
clip-rule="evenodd"
159+
d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM13.3367 5.33333C13.3367 4.59695 12.7398 4 12.0034 4C11.267 4 10.67 4.59695 10.67 5.33333V14.6667C10.67 15.403 11.267 16 12.0034 16C12.7398 16 13.3367 15.403 13.3367 14.6667V5.33333ZM13.3367 18.6667C13.3367 17.9303 12.7398 17.3333 12.0034 17.3333C11.267 17.3333 10.67 17.9303 10.67 18.6667C10.67 19.403 11.267 20 12.0034 20C12.7398 20 13.3367 19.403 13.3367 18.6667Z"
160+
fill-rule="evenodd"
161+
/>
162+
</svg>
163+
<svg
164+
aria-hidden="true"
165+
class="rcx-status-bullet rcx-status-bullet--offline undefined rcx-status-bullet--small"
166+
fill="none"
167+
height="12"
168+
viewBox="0 0 12 12"
169+
width="12"
170+
xmlns="http://www.w3.org/2000/svg"
171+
>
172+
<circle
173+
class="rcx-status-bullet rcx-status-bullet--offline"
174+
cx="6"
175+
cy="6"
176+
r="5"
177+
stroke-width="2"
178+
/>
179+
</svg>
180+
<svg
181+
aria-hidden="true"
182+
class="rcx-status-bullet rcx-status-bullet--loading undefined rcx-status-bullet--small"
183+
fill="none"
184+
height="12"
185+
viewBox="0 0 12 12"
186+
width="12"
187+
xmlns="http://www.w3.org/2000/svg"
188+
>
189+
<circle
190+
class="rcx-status-bullet rcx-status-bullet--loading"
191+
cx="6"
192+
cy="6"
193+
r="5"
194+
stroke-dasharray="2 2"
195+
stroke-width="2"
196+
/>
197+
</svg>
198+
</div>
199+
</div>
200+
</body>
201+
`;

‎packages/fuselage/src/components/StatusBullet/icons/Away.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Away = ({ size, className, ...props }: StatusBulletProps) => (
66
width='10'
77
height='10'
88
viewBox='0 0 10 10'
9+
aria-hidden='true'
910
className={`rcx-status-bullet rcx-status-bullet--away ${className} ${
1011
size === 'small' ? 'rcx-status-bullet--small' : ''
1112
}`}

‎packages/fuselage/src/components/StatusBullet/icons/Busy.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Busy = ({ size, className, ...props }: StatusBulletProps) => (
66
width='10'
77
height='10'
88
viewBox='0 0 10 10'
9+
aria-hidden='true'
910
className={`rcx-status-bullet rcx-status-bullet--busy ${className} ${
1011
size === 'small' ? 'rcx-status-bullet--small' : ''
1112
}`}

‎packages/fuselage/src/components/StatusBullet/icons/Disabled.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Disabled = ({ size, className, ...props }: StatusBulletProps) => (
66
width='24'
77
height='24'
88
viewBox='0 0 24 24'
9+
aria-hidden='true'
910
className={`rcx-status-bullet rcx-status-bullet--disabled ${className} ${
1011
size === 'small' ? 'rcx-status-bullet--small' : ''
1112
}`}

‎packages/fuselage/src/components/StatusBullet/icons/Loading.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const Loading = ({ size, className, ...props }: StatusBulletProps) => (
77
height='12'
88
viewBox='0 0 12 12'
99
fill='none'
10+
aria-hidden='true'
1011
xmlns='http://www.w3.org/2000/svg'
1112
className={`rcx-status-bullet rcx-status-bullet--loading ${className} ${
1213
size === 'small' ? 'rcx-status-bullet--small' : ''

‎packages/fuselage/src/components/StatusBullet/icons/Offline.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const Offline = ({ size, className, ...props }: StatusBulletProps) => (
77
height='12'
88
viewBox='0 0 12 12'
99
fill='none'
10+
aria-hidden='true'
1011
xmlns='http://www.w3.org/2000/svg'
1112
className={`rcx-status-bullet rcx-status-bullet--offline ${className} ${
1213
size === 'small' ? 'rcx-status-bullet--small' : ''

‎packages/fuselage/src/components/StatusBullet/icons/Online.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Online = ({ size, className, ...props }: StatusBulletProps) => (
66
width='24'
77
height='24'
88
viewBox='0 0 24 24'
9+
aria-hidden='true'
910
className={`rcx-status-bullet rcx-status-bullet--online ${className} ${
1011
size === 'small' ? 'rcx-status-bullet--small' : ''
1112
}`}

0 commit comments

Comments
 (0)