Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Contact Form #245

Open
buddy-harlow opened this issue Jul 26, 2024 · 0 comments · May be fixed by #384
Open

Contact Form #245

buddy-harlow opened this issue Jul 26, 2024 · 0 comments · May be fixed by #384
Labels
a11y Affects accessibility.

Comments

@buddy-harlow
Copy link
Collaborator

buddy-harlow commented Jul 26, 2024 •
edited
Loading

Location: https://www.bixal.com/

Design

  • Placeholder text is acting as form label.
  • There are no instructions stating "All fields marked with * are required"

Error identification

  • Only being handled by HTML5.
  • When I leave a required field empty and press Submit, the screen reader announces "Please fill out this field".

Suggestion

  • Recommend that we have permanent form labels and not rely on placeholder text
  • Ensure we include required fields are marked with asterisks.
  • When I make an error, I expect error identification to specifically identify which field(s) I need to fix.
  • If I make an error, I expect error suggestions to let me know how I can correct my mistake. (ie. If I my email is formatted incorrectly and missing an @ or .com)

Resource: Deque Blog - The Anatomy of Accessible Forms: Error Messages
@buddy-harlow buddy-harlow added the a11y Affects accessibility. label Jul 26, 2024
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Create an example component for devs
75ae329
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Return header JS if it's not on the page.
3797083 
In storybook, it'll try to run on all pages and cause an error when header nav is missing.
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Add global fieldset and label styles.
822150f
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Create grids per breakpoint.
20fffcb
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Grid defaults to a single column and inputs are full-…
40e408d 
…width.
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Create data for dynamic Contact form.
0846c12
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Add more base colors for secondary button styles.
d219962
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Create initial input story.
1b73cc4
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Contact section updates.
874335c 
- Add contact class for background image
- Add CAPTCHA placeholder text
- Pass secondary button variant to reset button
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Add required hint to inputs.
409b082
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Fix Contact background image.
711d251
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Add non-breaking space to required hint.
27116ec
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Remove Contact specific styles.
cd8b44b 
These rules are unnecessary now that we have a reusable grid.
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Add explicit grid percentages for even columns.
5ed134c 
Otherwise when content is long one column can extend beyond defined width.
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Remove secondary button variant.
7ac93e9
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Update unstyled button styles.
549c5d3
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Remove arrow from submit button.
0ad8797
@mejiaj mejiaj linked a pull request Mar 10, 2025 that will close this issue
Open
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Update Contact Us story import in page templates.
237aaaf
mejiaj added a commit that referenced this issue Mar 10, 2025
@mejiaj
BSD fixes #245: Reorder components.
bebb35f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Affects accessibility.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

BSD-245: Contact form labels Bixal/bixal-site-drupal
1 participant
@buddy-harlow