Skip to content

Commit e08b623

Browse files
setchyadufr
setchy
authored and
adufr
committed
feat: ensure all buttons have label and accessibility text (gitify-app#891)
1 parent fa4c054 commit e08b623

12 files changed

+81
-51
lines changed

‎src/components/Sidebar.test.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ describe('components/Sidebar.tsx', () => {
6161
});
6262

6363
it('should refresh the notifications', () => {
64-
const { getByLabelText } = render(
64+
const { getByTitle } = render(
6565
<AppContext.Provider
6666
value={{ isLoggedIn: true, notifications: [], fetchNotifications }}
6767
>
@@ -71,19 +71,19 @@ describe('components/Sidebar.tsx', () => {
7171
</AppContext.Provider>,
7272
);
7373
fetchNotifications.mockReset();
74-
fireEvent.click(getByLabelText('Refresh Notifications'));
74+
fireEvent.click(getByTitle('Refresh Notifications'));
7575
expect(fetchNotifications).toHaveBeenCalledTimes(1);
7676
});
7777

7878
it('go to the settings route', () => {
79-
const { getByLabelText } = render(
79+
const { getByTitle } = render(
8080
<AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
8181
<MemoryRouter>
8282
<Sidebar />
8383
</MemoryRouter>
8484
</AppContext.Provider>,
8585
);
86-
fireEvent.click(getByLabelText('Settings'));
86+
fireEvent.click(getByTitle('Settings'));
8787
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/settings');
8888
});
8989

@@ -108,14 +108,14 @@ describe('components/Sidebar.tsx', () => {
108108
});
109109

110110
it('should quit the app', () => {
111-
const { getByLabelText } = render(
111+
const { getByTitle } = render(
112112
<AppContext.Provider value={{ isLoggedIn: false, notifications: [] }}>
113113
<MemoryRouter>
114114
<Sidebar />
115115
</MemoryRouter>
116116
</AppContext.Provider>,
117117
);
118-
fireEvent.click(getByLabelText('Quit App'));
118+
fireEvent.click(getByTitle('Quit Gitify'));
119119
expect(ipcRenderer.send).toHaveBeenCalledTimes(1);
120120
expect(ipcRenderer.send).toHaveBeenCalledWith('app-quit');
121121
});

‎src/components/Sidebar.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -69,36 +69,40 @@ export const Sidebar: React.FC = () => {
6969
<>
7070
<button
7171
className={footerButtonClasses}
72+
title="Refresh Notifications"
7273
onClick={() => {
7374
navigate('/', { replace: true });
7475
fetchNotifications();
7576
}}
76-
aria-label="Refresh Notifications"
7777
>
78-
<IconRefresh className="w-3.5 h-3.5" />
78+
<IconRefresh
79+
className="w-3.5 h-3.5"
80+
aria-label="Refresh Notifications"
81+
/>
7982
</button>
8083

8184
<button
8285
className={footerButtonClasses}
86+
title="Settings"
8387
onClick={() => {
8488
if (location.pathname.startsWith('/settings')) {
8589
navigate('/', { replace: true });
8690
} else {
8791
navigate('/settings');
8892
}
8993
}}
90-
aria-label="Settings"
9194
>
92-
<IconCog className="w-4 h-4" />
95+
<IconCog className="w-4 h-4" aria-label="Settings" />
9396
</button>
9497
</>
9598
)}
9699

97100
{!isLoggedIn && (
98101
<button
99102
className={footerButtonClasses}
103+
title="Quit Gitify"
104+
aria-label="Quit Gitify"
100105
onClick={quitApp}
101-
aria-label="Quit App"
102106
>
103107
<IconQuit className="w-3.5 h-3.5" />
104108
</button>

‎src/components/__snapshots__/Sidebar.test.tsx.snap

+4-2
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,10 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
9393
className="py-4 px-3"
9494
>
9595
<button
96-
aria-label="Quit App"
96+
aria-label="Quit Gitify"
9797
className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
9898
onClick={[Function]}
99+
title="Quit Gitify"
99100
>
100101
<svg
101102
aria-hidden="true"
@@ -220,9 +221,10 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
220221
className="py-4 px-3"
221222
>
222223
<button
223-
aria-label="Quit App"
224+
aria-label="Quit Gitify"
224225
className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
225226
onClick={[Function]}
227+
title="Quit Gitify"
226228
>
227229
<svg
228230
aria-hidden="true"

‎src/routes/Login.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -38,24 +38,27 @@ export const LoginRoute: React.FC = () => {
3838

3939
<button
4040
className={loginButtonClass}
41-
onClick={loginUser}
41+
title="Login with GitHub"
4242
aria-label="Login with GitHub"
43+
onClick={loginUser}
4344
>
4445
Login to GitHub
4546
</button>
4647

4748
<button
4849
className={loginButtonClass}
49-
onClick={() => navigate('/login-enterprise')}
50+
title="Login with GitHub Enterprise"
5051
aria-label="Login with GitHub Enterprise"
52+
onClick={() => navigate('/login-enterprise')}
5153
>
5254
Login to GitHub Enterprise
5355
</button>
5456

5557
<button
5658
className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
57-
onClick={() => navigate('/login-token')}
59+
title="Login with Personal Token"
5860
aria-label="Login with Personal Token"
61+
onClick={() => navigate('/login-token')}
5962
>
6063
<small>or login with a personal token</small>
6164
</button>

‎src/routes/LoginEnterprise.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,9 @@ export const LoginEnterpriseRoute: React.FC = () => {
8585

8686
<button
8787
className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
88+
title="Login Button"
8889
disabled={submitting || pristine}
8990
type="submit"
90-
title="Login Button"
9191
>
9292
Login
9393
</button>
@@ -108,10 +108,14 @@ export const LoginEnterpriseRoute: React.FC = () => {
108108
<div className="flex justify-between items-center mt-4 py-2 mx-8">
109109
<button
110110
className="focus:outline-none"
111-
aria-label="Go Back"
111+
title="Go Back"
112112
onClick={() => navigate(-1)}
113113
>
114-
<ArrowLeftIcon size={20} className="hover:text-gray-400" />
114+
<ArrowLeftIcon
115+
size={20}
116+
className="hover:text-gray-400"
117+
aria-label="Go Back"
118+
/>
115119
</button>
116120

117121
<h3 className="text-lg font-semibold">Login with GitHub Enterprise</h3>

‎src/routes/LoginWithToken.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@ export const LoginWithToken: React.FC = () => {
9595

9696
<button
9797
className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
98+
title="Submit Button"
9899
disabled={submitting || pristine}
99100
type="submit"
100-
title="Submit Button"
101101
>
102102
Submit
103103
</button>
@@ -120,10 +120,14 @@ export const LoginWithToken: React.FC = () => {
120120
<div className="flex justify-between items-center mt-4 py-2 mx-8">
121121
<button
122122
className="focus:outline-none"
123-
aria-label="Go Back"
123+
title="Go Back"
124124
onClick={() => navigate(-1)}
125125
>
126-
<ArrowLeftIcon size={20} className="hover:text-gray-400" />
126+
<ArrowLeftIcon
127+
size={20}
128+
className="hover:text-gray-400"
129+
aria-label="Go Back"
130+
/>
127131
</button>
128132

129133
<h3 className="text-lg font-semibold">Login with an access token</h3>

‎src/routes/Settings.test.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ describe('routes/Settings.tsx', () => {
4646

4747
it('should press the logout', async () => {
4848
const logoutMock = jest.fn();
49-
let getByLabelText;
49+
let getByTitle;
5050

5151
await act(async () => {
52-
const { getByLabelText: getByLabelTextLocal } = render(
52+
const { getByTitle: getByLabelTextLocal } = render(
5353
<AppContext.Provider
5454
value={{
5555
settings: mockSettings,
@@ -63,10 +63,10 @@ describe('routes/Settings.tsx', () => {
6363
</AppContext.Provider>,
6464
);
6565

66-
getByLabelText = getByLabelTextLocal;
66+
getByTitle = getByLabelTextLocal;
6767
});
6868

69-
fireEvent.click(getByLabelText('Logout'));
69+
fireEvent.click(getByTitle('Logout'));
7070

7171
expect(logoutMock).toHaveBeenCalledTimes(1);
7272

@@ -299,10 +299,10 @@ describe('routes/Settings.tsx', () => {
299299
});
300300

301301
it('should go to the enterprise login route', async () => {
302-
let getByLabelText;
302+
let getByTitle;
303303

304304
await act(async () => {
305-
const { getByLabelText: getByLabelTextLocal } = render(
305+
const { getByTitle: getByTitleLocal } = render(
306306
<AppContext.Provider
307307
value={{
308308
settings: mockSettings,
@@ -314,20 +314,20 @@ describe('routes/Settings.tsx', () => {
314314
</MemoryRouter>
315315
</AppContext.Provider>,
316316
);
317-
getByLabelText = getByLabelTextLocal;
317+
getByTitle = getByTitleLocal;
318318
});
319319

320-
fireEvent.click(getByLabelText('Login with GitHub Enterprise'));
320+
fireEvent.click(getByTitle('Login with GitHub Enterprise'));
321321
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-enterprise', {
322322
replace: true,
323323
});
324324
});
325325

326326
it('should quit the app', async () => {
327-
let getByLabelText;
327+
let getByTitle;
328328

329329
await act(async () => {
330-
const { getByLabelText: getByLabelTextLocal } = render(
330+
const { getByTitle: getByTitleLocal } = render(
331331
<AppContext.Provider
332332
value={{ settings: mockSettings, accounts: mockAccounts }}
333333
>
@@ -336,10 +336,10 @@ describe('routes/Settings.tsx', () => {
336336
</MemoryRouter>
337337
</AppContext.Provider>,
338338
);
339-
getByLabelText = getByLabelTextLocal;
339+
getByTitle = getByTitleLocal;
340340
});
341341

342-
fireEvent.click(getByLabelText('Quit Gitify'));
342+
fireEvent.click(getByTitle('Quit Gitify'));
343343
expect(ipcRenderer.send).toHaveBeenCalledWith('app-quit');
344344
});
345345

‎src/routes/Settings.tsx

+15-8
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,14 @@ export const SettingsRoute: React.FC = () => {
8585
<div className="flex justify-between items-center mt-4 py-2 mx-8">
8686
<button
8787
className="focus:outline-none"
88-
aria-label="Go Back"
88+
title="Go Back"
8989
onClick={() => navigate(-1)}
9090
>
91-
<ArrowLeftIcon size={20} className="hover:text-gray-400" />
91+
<ArrowLeftIcon
92+
size={20}
93+
className="hover:text-gray-400"
94+
aria-label="Go Back"
95+
/>
9296
</button>
9397

9498
<h3 className="text-lg font-semibold">Settings</h3>
@@ -183,26 +187,29 @@ export const SettingsRoute: React.FC = () => {
183187
<div>
184188
<button
185189
className={footerButtonClass}
186-
aria-label="Login with GitHub Enterprise"
190+
title="Login with GitHub Enterprise"
187191
onClick={goToEnterprise}
188192
>
189-
<IconAddAccount className="w-5 h-5" />
193+
<IconAddAccount
194+
className="w-5 h-5"
195+
aria-label="Login with GitHub Enterprise"
196+
/>
190197
</button>
191198

192199
<button
193200
className={footerButtonClass}
194-
aria-label="Logout"
201+
title="Logout"
195202
onClick={logoutUser}
196203
>
197-
<IconLogOut className="w-5 h-5" />
204+
<IconLogOut className="w-5 h-5" aria-label="Logout" />
198205
</button>
199206

200207
<button
201208
className={`${footerButtonClass} mr-0`}
202-
aria-label="Quit Gitify"
209+
title="Quit Gitify"
203210
onClick={quitApp}
204211
>
205-
<IconQuit className="w-5 h-5" />
212+
<IconQuit className="w-5 h-5" aria-label="Quit Gitify" />
206213
</button>
207214
</div>
208215
</div>

‎src/routes/__snapshots__/Login.test.tsx.snap

+3
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,23 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
5959
aria-label="Login with GitHub"
6060
className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
6161
onClick={[Function]}
62+
title="Login with GitHub"
6263
>
6364
Login to GitHub
6465
</button>
6566
<button
6667
aria-label="Login with GitHub Enterprise"
6768
className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
6869
onClick={[Function]}
70+
title="Login with GitHub Enterprise"
6971
>
7072
Login to GitHub Enterprise
7173
</button>
7274
<button
7375
aria-label="Login with Personal Token"
7476
className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
7577
onClick={[Function]}
78+
title="Login with Personal Token"
7679
>
7780
<small>
7881
or login with a personal token

‎src/routes/__snapshots__/LoginEnterprise.test.tsx.snap

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ exports[`routes/LoginEnterprise.js renders correctly 1`] = `
88
className="flex justify-between items-center mt-4 py-2 mx-8"
99
>
1010
<button
11-
aria-label="Go Back"
1211
className="focus:outline-none"
1312
onClick={[Function]}
13+
title="Go Back"
1414
>
1515
<svg
16-
aria-hidden="true"
16+
aria-hidden="false"
17+
aria-label="Go Back"
1718
className="hover:text-gray-400"
1819
fill="currentColor"
1920
focusable="false"

‎src/routes/__snapshots__/LoginWithToken.test.tsx.snap

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ exports[`routes/LoginWithToken.js renders correctly 1`] = `
88
className="flex justify-between items-center mt-4 py-2 mx-8"
99
>
1010
<button
11-
aria-label="Go Back"
1211
className="focus:outline-none"
1312
onClick={[Function]}
13+
title="Go Back"
1414
>
1515
<svg
16-
aria-hidden="true"
16+
aria-hidden="false"
17+
aria-label="Go Back"
1718
className="hover:text-gray-400"
1819
fill="currentColor"
1920
focusable="false"

0 commit comments

Comments
 (0)