Skip to content

Commit

Permalink
DEV-1165: feedback form issues (#80)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@carylwyatt
carylwyatt authored May 13, 2024
1 parent 958b4c7 commit 9c9f5f7
Show file tree
Hide file tree
Showing 5 changed files with 262 additions and 71 deletions.
23 changes: 10 additions & 13 deletions src/js/components/FeedbackFormBasic/FeedbackFormBasic.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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' });
Expand Down
83 changes: 67 additions & 16 deletions src/js/components/FeedbackFormBasic/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}`
Expand Down Expand Up @@ -110,40 +133,68 @@
<main>
<form on:submit|preventDefault={onSubmit} class:hidden class="needs-validation mb-3" name="feedback" novalidate {id}>
<div class="mb-3">
<label for="name" class="form-label">Name <span class="required">(required)</span></label>
<input type="name" class="form-control" id="name" name="name" required />
<div class="invalid-feedback">Please provide your name.</div>
<!-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> -->
<label for="name" class="form-label">Name <span class="required" aria-hidden="true">(required)</span> </label>
<input aria-describedby="name-error" type="name" class="form-control" id="name" name="name" required />
<div class="invalid-feedback" id="name-error">
{#if nameError}
<span>Error: Please provide your name.</span>
{/if}
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address <span class="required">(required)</span></label>
<input type="email" class="form-control" id="email" name="email" required />
<div class="invalid-feedback">Please provide an email address.</div>
<label for="email" class="form-label"
>Email address <span class="required" aria-hidden="true">(required)</span></label
>
<input type="email" class="form-control" id="email" name="email" aria-describedby="email-error" required />
<div class="invalid-feedback" id="email-error">
{#if emailError}<span>Error: Please provide an email address.</span>{/if}
</div>
</div>
<div class="mb-3">
<label for="summary" class="form-label">Short summary <span class="required">(required)</span></label>
<input type="text" class="form-control" id="summary" name="summary" required />
<div class="invalid-feedback">Please provide a title or subject line to summarize your feedback.</div>
<label for="summary" class="form-label"
>Short summary <span class="required" aria-hidden="true">(required)</span></label
>
<input type="text" class="form-control" id="summary" name="summary" aria-describedby="summary-error" required />
<div class="invalid-feedback" id="summary-error">
{#if summaryError}<span>Error: Please provide a title or subject line to summarize your feedback.</span>{/if}
</div>
</div>
<div class="mb-3">
<label for="bookDescription" class="form-label"
>If your question is related to a specific book, what is the title or URL? <span class="required"
>(optional)</span
>If your question is related to a specific book, what is the title or URL? <span
class="required"
aria-hidden="true">(optional)</span
></label
>
<input type="text" class="form-control" id="bookDescription" name="bookDescription" />
</div>
<div class="mb-3">
<label for="description" class="form-label"
>Full description of problem or question <span class="required">(required)</span></label
>Full description of problem or question <span class="required" aria-hidden="true">(required)</span></label
>
<textarea class="form-control" id="description" name="description" rows="3" required />
<div class="invalid-feedback">Please provide some background or details for your feedback or question.</div>
<textarea
class="form-control"
aria-describedby="description-error"
id="description"
name="description"
rows="3"
required
/>
<div class="invalid-feedback" id="description-error">
{#if descriptionError}<span
>Error: Please provide some background or details for your feedback or question.</span
>{/if}
</div>
</div>
<input name="userURL" id="userURL" type="hidden" bind:value={userURL} />
<input name="userAgent" id="userAgent" type="hidden" bind:value={userAgent} />
<input name="userAuthStatus" id="userAuthStatus" type="hidden" bind:value={userAuthStatus} />
<input name="formName" id="formName" type="hidden" bind:value={formName} />
{#if errorMessage}
<div role="alert" class="mb-3">
The form did not submit due to errors in the fields. Please review error messages and resubmit the form.
</div>
{/if}

<button type="submit" class="btn btn-primary" disabled={loading}>
Submit{#if loading}
Expand Down
98 changes: 79 additions & 19 deletions src/js/components/FeedbackFormCatalog/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
let userURL = location.href;
let userAgent = navigator.userAgent;
let formName = 'catalog-correction';
let errorMessage,
nameError,
emailError,
summaryError = false;
//takes long string output of document.cookie and splits it into a usable javascript object
let cookies = document.cookie
Expand Down Expand Up @@ -77,6 +81,16 @@
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;
}
errorMessage = true;
} else {
// do the post fetch function, passing in the seralized data
postForm(data)
Expand All @@ -85,6 +99,10 @@
loading = false;
submitted = true;
hidden = true;
nameError = false;
emailError = false;
summaryError = false;
errorMessage = false;
console.log(
`request created in service desk ${jiraResponseData.serviceDeskId}: ${jiraResponseData.issueKey}`
Expand Down Expand Up @@ -117,72 +135,108 @@
<main>
<form on:submit|preventDefault={onSubmit} class:hidden class="needs-validation mb-3" name="feedback" novalidate {id}>
<div class="mb-3">
<label for="name" class="form-label">Name <span class="required">(required)</span></label>
<label for="name" class="form-label">Name <span class="required" aria-hidden="true">(required)</span></label>
<input type="name" class="form-control" id="name" name="name" required />
<div class="invalid-feedback">Please provide your name.</div>
<div class="invalid-feedback">
{#if nameError}
<span>Error: Please provide your name.</span>
{/if}
</div>
<!-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> -->
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address <span class="required">(required)</span></label>
<label for="email" class="form-label"
>Email address <span class="required" aria-hidden="true">(required)</span></label
>
<input type="email" class="form-control" id="email" name="email" required />
<div class="invalid-feedback">Please provide an email address.</div>
<div class="invalid-feedback">
{#if emailError}<span>Error: Please provide an email address.</span>{/if}
</div>
</div>
<div class="mb-3">
<label for="summary" class="form-label">Short summary <span class="required">(required)</span></label>
<label for="summary" class="form-label"
>Short summary <span class="required" aria-hidden="true">(required)</span></label
>
<input type="text" class="form-control" id="summary" name="summary" required />
<div class="invalid-feedback">Please provide a title or subject line to summarize your feedback.</div>
<div class="invalid-feedback">
{#if summaryError}<span>Error: Please provide a title or subject line to summarize your feedback.</span>{/if}
</div>
</div>
<div class="mb-3">
<label for="recordURL" class="form-label">URL of catalog record <span class="required">(required)</span></label>
<label for="recordURL" class="form-label"
>URL of catalog record <span class="required" aria-hidden="true">(optional)</span></label
>
<input type="text" class="form-control" id="recordURL" name="recordURL" />
<div class="invalid-feedback">
Please provide the URL of the record from the catalog where you found the issue.
</div>
</div>
<div class="mb-3">
<label for="itemURL" class="form-label"
>URL of specific item within record related to issue <span class="required">(optional)</span></label
>URL of specific item within record related to issue <span class="required" aria-hidden="true">(optional)</span
></label
>
<input type="text" class="form-control" id="itemURL" name="itemURL" />
</div>
<div class="mb-3">
<label for="itemTitle" class="form-label">Title of the book <span class="required">(optional)</span></label>
<label for="itemTitle" class="form-label"
>Title of the book <span class="required" aria-hidden="true">(optional)</span></label
>
<input type="text" class="form-control" id="itemTitle" name="itemTitle" />
</div>
<fieldset class="mb-3">
<legend class="mb-3 fs-6">
What specific problems are you noticing with the catalog record?
<span class="required">(required)</span>
<span class="required" aria-hidden="true">(required)</span>
</legend>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
role="checkbox"
name="problems"
value="Book doesn't match description"
id="c1"
bind:group={problems}
/>
<label class="form-check-label" for="flexCheckDefault">
The book doesn't match the description in its catalog record
</label>
<label class="form-check-label" for="c1"> The book doesn't match the description in its catalog record </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
role="checkbox"
name="problems"
value="Typo in metadata"
id="c2"
bind:group={problems}
/>
<label class="form-check-label" for="flexCheckDefault"> There is a typo in the metadata </label>
<label class="form-check-label" for="c2"> There is a typo in the metadata </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="problems" value="Other" bind:group={problems} />
<label class="form-check-label" for="flexCheckDefault"> Other (describe in description box) </label>
<input
class="form-check-input"
type="checkbox"
role="checkbox"
name="problems"
value="Other"
id="c3"
bind:group={problems}
/>
<label class="form-check-label" for="c3"> Other (describe in description box) </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="problems" value="None" bind:group={problems} checked />
<label class="form-check-label" for="flexCheckChecked"> No problems </label>
<input
class="form-check-input"
type="checkbox"
role="checkbox"
name="problems"
value="None"
id="c4"
bind:group={problems}
checked
/>
<label class="form-check-label" for="c4"> No problems </label>
</div>
</fieldset>
<fieldset class="mb-3">
Expand Down Expand Up @@ -235,7 +289,7 @@
</fieldset>
<div class="mb-3">
<label for="description" class="form-label"
>Other problems or comments? <span class="optional">(required)</span></label
>Other problems or comments? <span class="required" aria-hidden="true">(optional)</span></label
>
<textarea class="form-control" id="description" name="description" rows="3" />
</div>
Expand All @@ -244,6 +298,12 @@
<input name="userAuthStatus" id="userAuthStatus" type="hidden" bind:value={userAuthStatus} />
<input name="formName" id="formName" type="hidden" bind:value={formName} />

{#if errorMessage}
<div role="alert" class="mb-3">
The form did not submit due to errors in the fields. Please review error messages and resubmit the form.
</div>
{/if}

<button type="submit" class="btn btn-primary" disabled={loading}>
Submit{#if loading}
<span class="ms-2 spinner-border spinner-border-sm" role="status" aria-hidden="true" />
Expand Down
Loading

0 comments on commit 9c9f5f7

Please sign in to comment.