From 9c9f5f7cd9c3080a8bc4fb631083ab9d52a8b829 Mon Sep 17 00:00:00 2001 From: Caryl Wyatt Date: Mon, 13 May 2024 14:57:37 -0500 Subject: [PATCH] DEV-1165: feedback form issues (#80) * issue #71, #75 feedback form fixes 71: 1727249 remove "valid" styles and checkmark icon 75: 1727235 screen reader announcement of invalid form fields fix broken storybook tests for general feedback form remove green 'valid' focus styles --- .../FeedbackFormBasic.stories.js | 23 ++--- .../components/FeedbackFormBasic/index.svelte | 83 +++++++++++++--- .../FeedbackFormCatalog/index.svelte | 98 ++++++++++++++---- .../FeedbackFormContent/index.svelte | 99 ++++++++++++++----- src/scss/styles.scss | 30 ++++++ 5 files changed, 262 insertions(+), 71 deletions(-) diff --git a/src/js/components/FeedbackFormBasic/FeedbackFormBasic.stories.js b/src/js/components/FeedbackFormBasic/FeedbackFormBasic.stories.js index 0bbddaf..a40d828 100644 --- a/src/js/components/FeedbackFormBasic/FeedbackFormBasic.stories.js +++ b/src/js/components/FeedbackFormBasic/FeedbackFormBasic.stories.js @@ -35,18 +35,15 @@ export const DesktopFormFilled = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const name = await canvas.getByRole('textbox', { name: 'Name (required)' }); - const email = await canvas.getByRole('textbox', { - name: 'Email address (required)', + // const name = await canvas.getByRole('textbox', { name: 'Name ' }); + const name = await canvas.getByLabelText('Name (required)', {selector: 'input'}); + const email = await canvas.getByLabelText('Email address (required)', {selector: 'input'}); + const summary = await canvas.getByLabelText('Short summary (required)', {selector: 'input'}); + const bookDescription = await canvas.getByLabelText('If your question is related to a specific book, what is the title or URL? (optional)', { + selector: 'input' }); - const summary = await canvas.getByRole('textbox', { - name: 'Short summary (required)', - }); - const bookDescription = await canvas.getByRole('textbox', { - name: 'If your question is related to a specific book, what is the title or URL? (optional)', - }); - const description = await canvas.getByRole('textbox', { - name: 'Full description of problem or question (required)', + const description = await canvas.getByLabelText('Full description of problem or question (required)', { + selector: 'textarea' }); await userEvent.type(name, 'Caryl Wyatt'); @@ -64,8 +61,8 @@ export const DesktopFormMissingRequiredFields = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const bookDescription = await canvas.getByRole('textbox', { - name: 'If your question is related to a specific book, what is the title or URL? (optional)', + const bookDescription = await canvas.getByLabelText('If your question is related to a specific book, what is the title or URL? (optional)', { + selector: 'input' }); const submitButton = await canvas.getByRole('button', { name: 'Submit' }); diff --git a/src/js/components/FeedbackFormBasic/index.svelte b/src/js/components/FeedbackFormBasic/index.svelte index 64773ff..9727c49 100644 --- a/src/js/components/FeedbackFormBasic/index.svelte +++ b/src/js/components/FeedbackFormBasic/index.svelte @@ -5,6 +5,11 @@ let userURL = location.href; let userAgent = navigator.userAgent; let formName = 'basic-form'; + let errorMessage, + nameError, + emailError, + summaryError, + descriptionError = false; //takes long string output of document.cookie and splits it into a usable javascript object let cookies = document.cookie @@ -71,14 +76,32 @@ event.stopPropagation(); loading = false; formValid.classList.add('was-validated'); + if (formValid.querySelector('#name.form-control:invalid')) { + nameError = true; + } + if (formValid.querySelector('#email.form-control:invalid')) { + emailError = true; + } + if (formValid.querySelector('#summary.form-control:invalid')) { + summaryError = true; + } + if (formValid.querySelector('#description.form-control:invalid')) { + descriptionError = true; + } + errorMessage = true; } else { // do the post fetch function, passing in the seralized data postForm(data) - // if no error, hide form and log new issue ID + // if no error, hide form, reset all the error messages, and log new issue ID .then((jiraResponseData) => { loading = false; submitted = true; hidden = true; + nameError = false; + emailError = false; + summaryError = false; + descriptionError = false; + errorMessage = false; console.log( `request created in service desk ${jiraResponseData.serviceDeskId}: ${jiraResponseData.issueKey}` @@ -110,40 +133,68 @@
- - -
Please provide your name.
- + + +
+ {#if nameError} + Error: Please provide your name. + {/if} +
- - -
Please provide an email address.
+ + +
+ {#if emailError}Error: Please provide an email address.{/if} +
- - -
Please provide a title or subject line to summarize your feedback.
+ + +
+ {#if summaryError}Error: Please provide a title or subject line to summarize your feedback.{/if} +
Full description of problem or question -