Skip to content

Commit 1c47c85

Browse files
setchysetchy
authored
feat: ensure all buttons have label and accessibility text (#891)
1 parent b1f6a35 commit 1c47c85

File tree

12 files changed

+81
-51
lines changed

12 files changed

+81
-51
lines changed

‎src/components/Sidebar.test.tsx‎

Lines changed: 6 additions & 6 deletions
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‎

Lines changed: 9 additions & 5 deletions
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‎

Lines changed: 4 additions & 2 deletions
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‎

Lines changed: 6 additions & 3 deletions
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‎

Lines changed: 7 additions & 3 deletions
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‎

Lines changed: 7 additions & 3 deletions
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‎

Lines changed: 12 additions & 12 deletions
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

@@ -265,10 +265,10 @@ describe('routes/Settings.tsx', () => {
265265
});
266266

267267
it('should go to the enterprise login route', async () => {
268-
let getByLabelText;
268+
let getByTitle;
269269

270270
await act(async () => {
271-
const { getByLabelText: getByLabelTextLocal } = render(
271+
const { getByTitle: getByTitleLocal } = render(
272272
<AppContext.Provider
273273
value={{
274274
settings: mockSettings,
@@ -280,20 +280,20 @@ describe('routes/Settings.tsx', () => {
280280
</MemoryRouter>
281281
</AppContext.Provider>,
282282
);
283-
getByLabelText = getByLabelTextLocal;
283+
getByTitle = getByTitleLocal;
284284
});
285285

286-
fireEvent.click(getByLabelText('Login with GitHub Enterprise'));
286+
fireEvent.click(getByTitle('Login with GitHub Enterprise'));
287287
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/login-enterprise', {
288288
replace: true,
289289
});
290290
});
291291

292292
it('should quit the app', async () => {
293-
let getByLabelText;
293+
let getByTitle;
294294

295295
await act(async () => {
296-
const { getByLabelText: getByLabelTextLocal } = render(
296+
const { getByTitle: getByTitleLocal } = render(
297297
<AppContext.Provider
298298
value={{ settings: mockSettings, accounts: mockAccounts }}
299299
>
@@ -302,10 +302,10 @@ describe('routes/Settings.tsx', () => {
302302
</MemoryRouter>
303303
</AppContext.Provider>,
304304
);
305-
getByLabelText = getByLabelTextLocal;
305+
getByTitle = getByTitleLocal;
306306
});
307307

308-
fireEvent.click(getByLabelText('Quit Gitify'));
308+
fireEvent.click(getByTitle('Quit Gitify'));
309309
expect(ipcRenderer.send).toHaveBeenCalledWith('app-quit');
310310
});
311311

‎src/routes/Settings.tsx‎

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

9397
<h3 className="text-lg font-semibold">Settings</h3>
@@ -165,26 +169,29 @@ export const SettingsRoute: React.FC = () => {
165169
<div>
166170
<button
167171
className={footerButtonClass}
168-
aria-label="Login with GitHub Enterprise"
172+
title="Login with GitHub Enterprise"
169173
onClick={goToEnterprise}
170174
>
171-
<IconAddAccount className="w-5 h-5" />
175+
<IconAddAccount
176+
className="w-5 h-5"
177+
aria-label="Login with GitHub Enterprise"
178+
/>
172179
</button>
173180

174181
<button
175182
className={footerButtonClass}
176-
aria-label="Logout"
183+
title="Logout"
177184
onClick={logoutUser}
178185
>
179-
<IconLogOut className="w-5 h-5" />
186+
<IconLogOut className="w-5 h-5" aria-label="Logout" />
180187
</button>
181188

182189
<button
183190
className={`${footerButtonClass} mr-0`}
184-
aria-label="Quit Gitify"
191+
title="Quit Gitify"
185192
onClick={quitApp}
186193
>
187-
<IconQuit className="w-5 h-5" />
194+
<IconQuit className="w-5 h-5" aria-label="Quit Gitify" />
188195
</button>
189196
</div>
190197
</div>

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

Lines changed: 3 additions & 0 deletions
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‎

Lines changed: 3 additions & 2 deletions
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"

0 commit comments

Comments
 (0)