From 78cdecc2e38e4fd280cdc792cc3a913213a3c19b Mon Sep 17 00:00:00 2001 From: Caryl Wyatt Date: Tue, 30 Sep 2025 13:50:11 -0400 Subject: [PATCH 1/3] fix component instantiation --- src/js/main.svelte.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/main.svelte.js b/src/js/main.svelte.js index 228eb4f..f7c6395 100644 --- a/src/js/main.svelte.js +++ b/src/js/main.svelte.js @@ -131,7 +131,7 @@ document.documentElement.dataset.suportsInert = document.body.inert !== undefine document.querySelectorAll('[data-hathi-trigger]').forEach((el) => { let slug = el.dataset.hathiTrigger; let props = buildProps(el); - el.component = new apps[slug]({ + el.component = mount(apps[slug], { target: document.body, props: props, intro: true, From afaa723e3e55980daa4acd3327f019598e78573b Mon Sep 17 00:00:00 2001 From: Caryl Wyatt Date: Tue, 30 Sep 2025 14:06:48 -0400 Subject: [PATCH 2/3] add focus function for a11y --- src/js/components/FeedbackFormModal/index.svelte | 10 ++++++++++ src/js/components/Modal/index.svelte | 7 ++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/js/components/FeedbackFormModal/index.svelte b/src/js/components/FeedbackFormModal/index.svelte index c7e2616..f64e06b 100644 --- a/src/js/components/FeedbackFormModal/index.svelte +++ b/src/js/components/FeedbackFormModal/index.svelte @@ -80,6 +80,16 @@ {/snippet} + {:else if form == 'contact'} + + {#snippet title()} + Contact HathiTrust + {/snippet} + {#snippet body()} + {#if winterBreak}

{@html message}

{/if} + + {/snippet} + {:else} {#snippet title()} diff --git a/src/js/components/Modal/index.svelte b/src/js/components/Modal/index.svelte index e7a4415..a95581e 100644 --- a/src/js/components/Modal/index.svelte +++ b/src/js/components/Modal/index.svelte @@ -15,6 +15,7 @@ * @property {boolean} [fullscreenOnMobile] * @property {boolean} [focusHelpOnClose] * @property {boolean} [focusMyAccountOnClose] + * @property {boolean} [focusButtonOnClose] * @property {import('svelte').Snippet} [title] * @property {import('svelte').Snippet} [body] * @property {import('svelte').Snippet} [footer] @@ -33,6 +34,7 @@ fullscreenOnMobile = false, focusHelpOnClose = false, focusMyAccountOnClose = false, + focusButtonOnClose = false, title, body, footer, @@ -57,7 +59,7 @@ } isOpen = true; dialog.showModal(); - if (focusHelpOnClose || focusMyAccountOnClose) { + if (focusHelpOnClose || focusMyAccountOnClose || focusButtonOnClose) { window.addEventListener('keydown', logKeys); } }; @@ -81,6 +83,9 @@ if (focusMyAccountOnClose) { document.querySelector('#my-account a').focus(); } + if (focusButtonOnClose) { + document.querySelector('#feedback-form').focus(); + } }; onMount(() => { From 492ae989b4da9dc209e88d7b376ba58f18238578 Mon Sep 17 00:00:00 2001 From: Caryl Wyatt Date: Wed, 1 Oct 2025 09:25:11 -0400 Subject: [PATCH 3/3] add unique ids to form labels --- .../components/FeedbackFormBasic/index.svelte | 58 +++++++++++-------- 1 file changed, 33 insertions(+), 25 deletions(-) diff --git a/src/js/components/FeedbackFormBasic/index.svelte b/src/js/components/FeedbackFormBasic/index.svelte index e5d2587..2fdf7b4 100644 --- a/src/js/components/FeedbackFormBasic/index.svelte +++ b/src/js/components/FeedbackFormBasic/index.svelte @@ -9,6 +9,9 @@ summaryError = $state(), descriptionError = $state(false); + const id = $props.id(); + const form = `form#${id}`; + //takes long string output of document.cookie and splits it into a usable javascript object let cookies = document.cookie .split(';') @@ -26,8 +29,6 @@ /** * @typedef {Object} Props - * @property {any} [id] - * @property {any} [form] * @property {any} postResponseStatusCode * @property {boolean} [loading] - when true, spinner on submit button animates * @property {boolean} [hidden] - when true, hides the element (in this case, the form) @@ -38,8 +39,6 @@ /** @type {Props} */ let { - id = `id${new Date().getTime()}`, - form = `form#${id}`, postResponseStatusCode = $bindable(), loading = $bindable(false), hidden = $bindable(false), @@ -86,16 +85,16 @@ event.stopPropagation(); loading = false; formValid.classList.add('was-validated'); - if (formValid.querySelector('#name.form-control:invalid')) { + if (formValid.querySelector(`#${id}-name.form-control:invalid`)) { nameError = true; } - if (formValid.querySelector('#email.form-control:invalid')) { + if (formValid.querySelector(`#${id}-email.form-control:invalid`)) { emailError = true; } - if (formValid.querySelector('#summary.form-control:invalid')) { + if (formValid.querySelector(`#${id}-summary.form-control:invalid`)) { summaryError = true; } - if (formValid.querySelector('#description.form-control:invalid')) { + if (formValid.querySelector(`#${id}-description.form-control:invalid`)) { descriptionError = true; } errorMessage = true; @@ -143,70 +142,79 @@
- + -
+
{#if nameError} Error: Please provide your name. {/if}
- -
+
{#if emailError}Error: Please provide an email address.{/if}
- - -
+ +
{#if summaryError}Error: Please provide a title or subject line to summarize your feedback.{/if}
- - +
- -
+
{#if descriptionError}Error: Please provide some background or details for your feedback or question.{/if}