Skip to content

Commit 0e55121

Browse files
carylwyattcarylwyatt
committed
Merge branch 'main' into deployment
2 parents f831d76 + 9d5e058 commit 0e55121

File tree

4 files changed

+38
-31
lines changed

4 files changed

+38
-31
lines changed

‎src/js/components/Modal/index.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@
1313
export let modalLarge = false;
1414
export let fullscreenOnMobile = false;
1515
export let focusHelpOnClose = false;
16+
export let focusMyAccountOnClose = false;
1617
1718
let modalBody;
1819
1920
let dialog;
2021
2122
function logKeys(e) {
22-
console.log(`Key "${e.key}" was pressed`);
23+
// console.log(`Key "${e.key}" was pressed`);
2324
if (e.key === 'Escape') {
2425
hide();
2526
window.removeEventListener('keydown', logKeys);
@@ -32,7 +33,7 @@
3233
}
3334
isOpen = true;
3435
dialog.showModal();
35-
if (focusHelpOnClose) {
36+
if (focusHelpOnClose || focusMyAccountOnClose) {
3637
window.addEventListener('keydown', logKeys);
3738
}
3839
};
@@ -53,6 +54,9 @@
5354
if (focusHelpOnClose) {
5455
document.getElementById('get-help').focus();
5556
}
57+
if (focusMyAccountOnClose) {
58+
document.querySelector('#my-account a').focus();
59+
}
5660
};
5761
5862
onMount(() => {

‎src/js/components/Navbar/Navbar.stories.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const DesktopLoggedInResourceSharingRole = {
7676
],
7777
play: async ({ canvasElement }) => {
7878
const canvas = within(canvasElement);
79-
const accountButton = canvas.getByLabelText('My account');
79+
const accountButton = canvas.getByLabelText(/My Account/);
8080
await userEvent.click(accountButton);
8181
},
8282
};
@@ -94,7 +94,7 @@ export const DesktopLoggedInResourceSharingRoleActivated = {
9494
],
9595
play: async ({ canvasElement }) => {
9696
const canvas = within(canvasElement);
97-
const accountButton = canvas.getByLabelText('My account');
97+
const accountButton = canvas.getByLabelText(/My Account/);
9898
await userEvent.click(accountButton);
9999
},
100100
};
@@ -174,7 +174,7 @@ export const MobileLoggedInResourceSharingRole = {
174174
play: async ({ canvasElement }) => {
175175
const canvas = within(canvasElement);
176176
const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
177-
const accountButton = canvas.getByLabelText('My account');
177+
const accountButton = canvas.getByLabelText(/My Account/);
178178
await userEvent.click(mobileMenuButton);
179179
await userEvent.click(accountButton);
180180
},
@@ -194,7 +194,7 @@ export const MobileLoggedInResourceSharingRoleActivated = {
194194
play: async ({ canvasElement }) => {
195195
const canvas = within(canvasElement);
196196
const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
197-
const accountButton = canvas.getByLabelText('My account' );
197+
const accountButton = canvas.getByLabelText(/My Account/);
198198
await userEvent.click(mobileMenuButton);
199199
await userEvent.click(accountButton);
200200
},
@@ -237,7 +237,7 @@ export const MobileLoggedInMyAccountDropdown = {
237237
const canvas = within(canvasElement);
238238

239239
const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
240-
const myAccount = canvas.getByLabelText('My account');
240+
const myAccount = canvas.getByLabelText(/My Account/);
241241

242242
await userEvent.click(mobileMenuButton);
243243
await userEvent.click(myAccount);
@@ -265,7 +265,7 @@ export const MobileLoggedInResourceSharingRoleActivatedHasNotification = {
265265
play: async ({ canvasElement }) => {
266266
const canvas = within(canvasElement);
267267
const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
268-
const accountButton = canvas.getByLabelText('My account' );
268+
const accountButton = canvas.getByLabelText(/My Account/);
269269
await userEvent.click(mobileMenuButton);
270270
await userEvent.click(accountButton);
271271
},

‎src/js/components/Navbar/index.svelte‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@
379379
role="button"
380380
data-bs-toggle="dropdown"
381381
aria-expanded="false"
382-
aria-label="My account"
382+
aria-labelledby="my-account-label role-heading role-active"
383383
>
384384
<div class="d-flex justify-content-center align-items-center">
385385
<span
@@ -392,8 +392,10 @@
392392
<i class="fa-solid fa-user text-neutral-800" />
393393
{/if}
394394
</span>
395-
<span class="ms-3 d-xl-none">My Account</span><span class="visually-hidden d-none d-xl-block"
396-
>My Account</span
395+
<span id="my-account-label"
396+
><span class="ms-3 d-xl-none">My Account</span><span class="visually-hidden d-none d-xl-block"
397+
>My Account</span
398+
></span
397399
>
398400
</div>
399401
</a>
@@ -423,9 +425,11 @@
423425
data-disabled={!hasNotification}
424426
disabled={!hasNotification ? true : null}
425427
on:click={notificationsModal.show()}
426-
><i class="fa-solid fa-bell fa-fw" class:opacity-25={!hasNotification} /><span
427-
class="needs-hover-state"
428+
><i
429+
class="fa-solid fa-bell fa-fw"
428430
aria-hidden="true"
431+
class:opacity-25={!hasNotification}
432+
/><span class="needs-hover-state"
429433
>Notifications {#if hasNotification}({notificationsManager.count()}){/if}</span
430434
>
431435
</button>
@@ -449,7 +453,6 @@
449453
href="#"
450454
role="button"
451455
id="switch"
452-
aria-labelledby="switch role-heading role-active"
453456
on:click={roleSwitchModal.show()}
454457
><i class="fa-solid fa-user-group fa-fw" aria-hidden="true" /><span class="needs-hover-state">
455458
Switch Role

‎src/js/components/RoleSwitchModal/index.svelte‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@
66
let switchableRole = Object.keys(HT.login_status.r)[0];
77
let roleActivated = Object.values(HT.login_status.r)[0];
88
let role = roleActivated ? switchableRole : 'default';
9+
10+
const switchableRolesLabels = {};
11+
switchableRolesLabels['enhancedTextProxy'] = 'Accessible Text Request Service (ATRS)';
12+
switchableRolesLabels['totalAccess'] = 'Collection Administration Access';
13+
switchableRolesLabels['resourceSharing'] = 'Resource Sharing';
14+
15+
let roleLabel = switchableRolesLabels[switchableRole];
16+
917
let url = document.location.href;
1018
let modal;
1119
export let src = '/common/firebird/dist/hathitrust-icon-orange.svg';
@@ -26,7 +34,8 @@
2634
}
2735
});
2836
29-
function submit() {
37+
function submit(event) {
38+
event.preventDefault();
3039
loading = true;
3140
let params = new URLSearchParams();
3241
params.set('role', role);
@@ -47,7 +56,7 @@
4756
</script>
4857

4958
<div class="switch-roles">
50-
<Modal bind:this={modal} scrollable modalLarge fullscreenOnMobile>
59+
<Modal bind:this={modal} scrollable modalLarge fullscreenOnMobile focusMyAccountOnClose>
5160
<svelte:fragment slot="title">
5261
<div class="align-items-center d-flex gap-2 py-2 settings-heading">
5362
<img {src} alt="" role="presentation" />
@@ -61,6 +70,7 @@
6170
action="/cgi/ping/switch"
6271
method="POST"
6372
class="w-100 h-100 d-flex flex-column justify-content-between"
73+
on:submit={submit}
6474
>
6575
<div class="roles d-flex flex-column h-100">
6676
<label
@@ -110,13 +120,7 @@
110120
>
111121
<div class="d-flex flex-column gap-2">
112122
<span id="switchable" class="form-check-label">
113-
{#if switchableRole === 'resourceSharing'}
114-
Resource Sharing
115-
{:else if switchableRole === 'totalAccess'}
116-
Collection Administration Access
117-
{:else if switchableRole === 'enhancedTextProxy'}
118-
Accessible Text Request Service (ATRS) Provider
119-
{/if} <span class="visually-hidden">For additional info read below</span>
123+
{roleLabel} <span class="visually-hidden">For additional info read below</span>
120124
</span>
121125
<div class="option--help">
122126
{#if switchableRole === 'resourceSharing'}
@@ -227,18 +231,14 @@
227231
<svelte:fragment slot="footer">
228232
<div class="py-3 px-4 m-0">
229233
<div class="d-flex gap-3">
230-
<button class="btn btn-white py-2 px-3 m-0" name="action" value="cancel" on:click={() => hide()}
234+
<button class="btn btn-white border-0 py-2 px-3 m-0" name="action" value="cancel" on:click={() => hide()}
231235
>Cancel</button
232236
>
233-
<button
234-
class="btn btn-primary py-2 px-3 m-0"
235-
type="submit"
236-
form="ping-switch"
237-
disabled={loading}
238-
on:click={submit}
237+
<button class="btn btn-primary py-2 px-3 m-0" type="submit" form="ping-switch" disabled={loading}
239238
>Submit{#if loading}
240239
<span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true"></span>
241-
<span class="visually-hidden">Loading...</span>{/if}</button
240+
<span class="visually-hidden">Switching your role to {role === 'default' ? 'Member' : roleLabel}</span
241+
>{/if}</button
242242
>
243243
</div>
244244
</div>

0 commit comments

Comments
 (0)