Enhance app accessibility & UX with focus management: auto-focus error fields, programmable forms, & better editing. Create an inclusive, user-friendly app.

Enhance React app accessibility and UX: auto-focus form inputs and navigate to error messages for improved handling of form errors.

Managing Focus for Form Errors

[00:00] Let's do the easy thing first. So the easy thing is to make it so that we autofocus on the input when we land on this page. So we'll add autofocus right here. That was it, easy. Nothing going on there, boom, autofocus, awesome. So that's good.

[00:15] So now let's do the little bit harder thing next, and that is we need to add a use effect. I know, a use effect, but don't worry, this is actually exactly what use effects are intended for. Side effects on the state of the world. So the state of the world being the state of the DOM

[00:33] and the focus of the elements in the DOM. So we're gonna add a use effect right here, and we've got a couple of cases to consider. We're gonna add our dependency array right there, and we don't want an infinite loop, or we don't want to run this every single time, and we'll add dependencies, don't worry about that. So what we need to do is determine

[00:51] whether or not there is an error, and also we need to have access to our form, and in the case that there is no error, or there is no form, then we can just exit early. So let's do that first. Let's grab our ref, so here's our form ref, use ref,

[01:10] and this will be an HTML form element. We'll initialize that to null, and then come down here and add our ref, is our form ref, ooh, form, fiorm, yeah, there we go. And then we can simply say,

[01:29] here's our form l, is form ref dot current, and if there's not a form l, then we'll return. This is unlikely to ever happen. It certainly will not happen with the way that we have things structured right now, but it is possible somebody will come in and be like, if thing, then return completely different JSX.

[01:48] That does happen sometimes, and in that case, this will be a problem. So I always like to do those exit earlies and listen to TypeScript when it says that it's possible that form l could be a null. So we're handling that case right there, and then the next thing we need to do is determine whether or not we're in an error state at all.

[02:06] So we can say if action data dot status is error, then we're good to go. Whoops, I'm actually gonna do a negation on that, so if it's not, then we'll return. And now we're getting this quick fix for our action data. I'm gonna just pass the entire action data there

[02:25] because anytime the status changes, the entire action data object will change and everything, so we'll just pass the whole action data object. Okay, great, so we've taken care of these points. Now, if the form ref current matches the query of aria-invalid true, then we wanna focus on that form.

[02:44] So there are actually a couple ways that you could accomplish this. You could actually get the form element and you can check its validity state and a bunch of other ways that you could accomplish this, but I actually like the way that we're gonna be doing this here. So we're gonna say if the, whoops,

[03:00] the form l matches this query, which of course needs to be in a string, then we're going to say form l dot focus. So we'll focus on the form element, but there's a problem here, and that is that form elements like divs and spans, they're not focusable

[03:18] unless you add a tab index of negative one. And what that means, normally you'd add a tab index of zero, so then users can tab around. If you do anything above zero, then you're controlling the order in which things are tabbed around, and that's not something you typically do.

[03:35] But adding a tab index of negative one says, this is not something that people can tab around to, but it is something that I can programmatically focus on, which can be helpful in this particular case. And because our form is associated to any of its errors,

[03:52] when that happens, the user will get a focus on the form, and then the screen reader will tell them, hey, there's some ARIA described by on this thing, so you can see what those errors are, or hear what those errors are, which is exactly what we want. If it doesn't match those things,

[04:10] then we're gonna get our first invalid field using form query selector. I don't like this, so thanks Copilot, but no thanks. This is lying to ourselves. So we're gonna just say, it returns what it returns, and we're looking for the first invalid element inside of our form.

[04:29] And if that exists, and it's an instance of HTML element, then it will be focusable. And so that is how I like to do that. No, we're not using the generic, that's lying to ourselves. This is doing a runtime check to make sure that we're doing things properly. Okay, and then we can focus on that. So let's just test this out.

[04:52] So right here, I say, boom, and boom. Actually, that was kind of cheating, because I was focused on this already. So let's come down here, we'll click on submit, and boom, I get sent to the right place. If they both have errors, then I get focused on the first one. If this one doesn't have an error, then I get focused on that one.

[05:10] Now, if you'd like to take a little bit of time and add some error for the whole form as a whole, and you should see that the error message shows up, and that you focus on the form. And yeah, you know what, let's just do that really quick. It'll be easy. So we'll just come here. We'll say, form errors, this is a test.

[05:30] Save that, and we'll type something in here. Actually, let's not. So this will also have an error. Then we hit submit. And now, you can't actually see it, but we are focused on the form itself. The screen reader will tell us that. So let's actually, let's turn on the screen reader and test that out. So right here, actually, I am focused on the form. You can see that. Here we go.

[05:51] So let's try that again. And then I am submit. And now, I am on the form itself. And if I do the hotkey to show the more content, I'm gonna see this is a test. So really helping our screen reader users out

[06:08] in that case as well, which is awesome. Just a quick review of what we did here. The first thing that we did was we add a autofocus to the input. And then we add a use effect. Well, actually, I think we also added the form ref. That's quite important here,

[06:27] so that we can get a handle on the form DOM node. Then we also added a tab index to the form of a negative one so that we can focus on that form element. And then in a use effect, we check that the form L exists and that we're in an error state. And if that's the case, we look to see whether the form itself

[06:46] has an ARIA invalid on it. And if it does, then we'll focus on that to help with the screen readers and navigation and everything. And I should mention also that when you have focus on that form, the next tab is gonna take you to the first input. So it's exactly the way that it should be.

[07:03] And then in the case that the form is not invalid, then we're gonna look for the first invalid field. And so long as it's a focusable element, then we will focus on it. And that is how you manage focus as far as errors are concerned for a form in HTML and DOM and stuff. Like most of this stuff,

[07:22] we're using React and use effect and stuff, but the concepts here, it applies regardless of what framework you're using. You'd want to manage focus for your forms. And that's how you do it in Remix and React.

Focus Management for Better User Experience

[00:00] So let's say I'm a user that's new to the app and I don't realize that the content needs to have some value into it. And so I go and submit this and we get this error. Now my focus is on the submit button, but the submit button was disabled.

[00:15] But my focus stays down there, so I'm tapping around and now I have to go find, okay, where was the error? People using assistive technologies who cannot see the screen experience this on the daily and it's awful. So what we really should do is auto-focus on the first field that has an error.

[00:32] If both fields have an error, then we should auto-focus on the first one and then they can tap through and fix all of the errors that are on the page. If the form as a whole has an error, we should focus on the form as well, which has interesting implications for things because forms aren't typically focusable.

[00:49] But you can make it so it's programmatically focusable for our purposes, but not something that would be focused on if you're just tapping through, which is exactly what we want to do. So a couple of things you need to do to address this. And we also, I think it would make a lot of sense if I hit the edit button and it auto-focuses on the title.

[01:09] So I want you to do that as well. We're just going to do some focus management, make the experience better, not only for assistive technology users, but just for everybody. So definitely spend a little bit of time working on that and we'll see you on the other side.

Forms are the primary mechanism for interactivity on the web.

But for all of their importance, forms can be incredibly frustrating for developers and users alike.

There are a lot of moving parts to consider: 

You need to validate user input and handle complex data structures, while being secure from bots and data-stealing attacks. The UI should inform users of any issues as quickly as possible, and be accessible for all.

The Professional Web Forms Workshop will equip you with the tools to handle all of these challenges and more.

## Form Validation

HTML has several attributes built-in that help with form element validation. Unfortunately, they're not enough on their own. On the client-side, bad actors can bypass checks by manually adding the `novalidate` attribute or making requests directly. On the server side, there's no standard way to respond to validation errors other than a generic 400 status code.

In this section, you'll implement a base level of form validation:

- Essential HTML attributes for validation
- Server-side validation with JSON responses
- Displaying errors with the `useActionData` hook
- Disabling default browser validation messages with `useHydrated`

## Accessibility

Accessibility is often an afterthought, but should be a priority. While forms are just one part of the accessibility equation, they're a big one. In this section, you'll learn how to make sure your forms accessible and usable by all of your application's users:

- Properly associating labels with input fields
- Adding appropriate ARIA attributes when necessary
- Manage keyboard focus in response to errors and user interactions
- Creating and using a `useFocus` hook to direct the user’s focus
- Considerations for accessibility testing

## Schema-Based Validation

Manually writing conditional checks for every field in every form is tedious and error-prone: *Is there content in the field? Is it the right type? Is it within the acceptable range? There must be a better way!*

Fortunately, the combination of the Zod and Conform libraries makes it easy to define reusable declarative schemas to validate form data on the client and server:

- Safely replace HTML validation attributes with schemas
- Zod error handling & message customization
- Progressively enhanced validation with Conform
- Share type-safe validation logic between client and server

## File Uploads

Forms need to support more than just text. Images, videos, audio files, and other documents need a different type of input. Depending on the size of the file, you'll have considerations for how and where it is uploaded. In this section, you'll learn how to handle file uploads in a secure and efficient way:

- Uploading images from an `ImageChooser` component
- Handling file uploads on the server
- Schema validation for file uploads with Zod

## Complex Data Structures

The `FormData` API does not support representing objects or arrays– only key/value pairs. It also won't allow you to nest forms within each other. This makes representing complex data structures difficult without jumping through some hoops. Luckily for us, Conform has a great solution when your forms get complex. Here you'll practice:

- Infer field types with Zod
- Nesting objects as a form
- Represent arrays of fields with the `useFieldList` utility
- Add and remove items with Conform's `intent` buttons

## Spam Prevention with Honeypots

Spam bots are constantly crawling the web, looking for forms to submit junk data to boost their client’s search engine rankings and find holes in your security. This can strain server resources, contaminate databases, and cause other unforeseen consequences. One way to combat this is by using a "honeypot", which will prevent a form from being submitted by a bot. This section will teach you how to:

- Create a simple hidden-field validation
- Add a configurable honeypot instance to an action
- Prevent form submissions that are too fast
- Use environment variables for encryption seeds

## CSRF Protection

Cross-Site Request Forgery (CSRF) attacks are a type of malicious exploit where a user is tricked into performing an action they did not intend to. This is usually done by embedding a link or form in a page that the user is already authenticated to. Think of a user logged into their bank account clicking a link that transfers money from their bank account to the attacker's. To prevent this type of attack, you'll want to:

- Create a signed cookie in the user's browser
- Include unique user tokens in forms
- Validate tokens on the server via request headers

## Rate Limiting

You definitely want to prevent bad actors from making tons of requests to try to brute-force their way into your app or cause general chaos. However, malicious intent and spam aren't the only reasons you need to protect your site. Even too many legitimate requests can cause problems. Rate limiting is a way to prevent users from overloading your server with requests. Here you'll learn:

- Considerations for different limits for `GET` vs. `POST` requests
- Implementing basic rate limiting with Express middleware
- Tiered rate limiting depending on which form is being submitted

The Professional Web Forms Workshop will equip you for building complex, fully accessible forms that handle validation and file uploads while preventing spam.

Professional Web Forms

Kent C. Dodds

Full Stack Vol 1

Intro to Professional Web Forms Workshop

Introduction to Workshop

Intro to Form Validation 

Discover the importance of validation in web apps. Learn to implement required field validation for data integrity and UX enhancement.

Leverage HTML attributes for form validation, enhancing UX and accessibility. Explore browser validation and screen reader integration for user guidance.

Form Validation for Accessibility

Required Field Validation for User Input

Implement server-side validation to enhance security and user assistance, preventing client-side bypass. Customize error messages for a seamless design.

Master server-side form validation for data integrity and user-friendly error messages. Enhance UX by securely validating input before server processing.

Server-Side Form Validation and Error Handling

Server-side Validation and Custom Error Messages

Prevent incorrect form submissions pre-JavaScript with novalidate attribute using useHydrated hook. Elevate UX, maintain data integrity.

Optimize form validation with 'useHydrated' hook for client-side hydration. Enhance UX with browser-built and server-side validation synergy.

Form Validation with Client-Side Hydration

Dynamic Error Validation with Hooks

Dad Joke Break From Validation

Form Validation

Intro to Accessibility

Learn how to troubleshoot and fix issues with a non-functioning reset button and accessibility problems in a web form.

Learn how to properly associate buttons and form elements, such as the reset button, with their respective forms for improved functionality and accessibility.

Improving Accessibility and Form Associations

Fixing Form Reset Button and Accessibility Issues

Associate error messages with input fields via ARIA attributes for precise screen reader notifications. Learn about semantic HTML and ARIA for accessibility.

Use ARIA attributes like ARIA invalid & describedby. Link error messages to inputs for improved screen reader support, aiding assistive tech users.

Accessible Forms with ARIA Attributes

Error Messages and Accessibility with ARIA Attributes

Dad Break Joke Accessibility

Accessibility

Intro to Schema Validation

Optimize development with Zod schema validation. Boost efficiency and code robustness, replacing custom logic for an enhanced developer experience. 

Learn how to implement schema validation using Zod in a note editor application. Discover how to define and enforce data

Schema Validation with Zod 

Schema Validation 

Data parsing with Conform's Conform utility. Apply server-side logic and streamline development with additional UI utilities for efficient form handling.

Improve UX & enable progressive enhancement: Replace form validation & error handling with powerful Zod utility in your app

 Form Submission and Error Handling with Conform & Zod

Form Data Parsing with Conform

Enhance UI with Conform's React utilities for end-to-end type safety. Leverage progressive enhancement for a fabulous development experience.

Eliminate custom code for better UX. Seamlessly manage form submission and client-side validation with Conform, ensuring robust server-side validation

Simplifying Form Handling with Conform and Schema Validation

Type Safety with Conform

Dad Joke Break Schema Validation

Schema Validation

Intro to File Upload

Add file upload to edit page for user-friendly image & file attachments. Handle uploads in Remix, enforcing size limits. 

Integrate image upload with form data and memory handling. Use image chooser, manage existing images, set encoding, size limit, and specify alt text. 

Image Upload with Form Data and Memory Upload Handling

File Upload Functionality 

Improve code quality and address TypeScript errors for a robust application, making Lily the life jacket (and yourself) happy.

Update schema for image ID, alt text, and file uploads. Master file validation with Zod for size restrictions and error handling on client & server sides. 

Validating File Uploads with Zod Schema in a Web Application

TypeScript Integration

Dad Joke Break File Upload

File Upload

Intro to Complex Structures 

Address challenges in grouping properties into sub-objects in forms, especially for multiple image uploads. Satisfy Zod's requirements for seamless integration.

Learn to add image field set schema to Zod schema, update HTML elements, and integrate with Conform for type safety and form functionality. 

Implementing Image Field Set with Conform and TypeScript

Grouping and Managing Related Fields in Form Objects

Update your app's schema for multiple images, adapt actions/components, and enable seamless addition/removal of multiple images for an enhanced user experience.

Master dynamic image lists with Qualifax: add and remove images effortlessly. Update schema, implement field sets, and iterate through image choosers with ease.

Dynamic Image Lists with Field Sets 

Multiple Image Uploading 

Dynamic image addition and deletion with alt text functionality, progressive enhancements, and input submission using Conform utilities in web development

Master dynamic button generation for form accessibility using Conform utilities. Modify field sets with list functions, explore progressive enhancement.

Dynamically Delete and Add Buttons

 Interactive Image Management

Dad Joke Break Complex Structures 

Complex Structures

Intro to Honeypot

Add a hidden input field honeypot to deter spam bots, enhance deliverability, and prevent spam issues. Explore additional tips for form security.

Boost sign-up form security with invisible honeypot fields to catch spam bots. Discover effective techniques for handling bot submissions in your app.

Honeypot Fields in Sign Up Forms

Adding a Honeypot to Protect Against Spam Bots

Protect your website from spam bots with automatic updates to Honeypot configurations.

Enhance security with Remix Utils Honeypot fields. Customize divs, ARIA, and server-side validation to deter spam. Best practices for errors and HTTP codes.

Honeypot Fields for Form Security

Honeypot Protection with `remix-utils`

Efficiently implement Honeypot security on forms: Transfer server data to client for reliable bot protection.

Implement honeypot protection: Create provider, configure props, render components, prevent quick form submission, thwart automated bots.

Honeypot Protection

Honeypots for Form Security 

Ensure consistent Honeypot encryption secret across servers and regions for form data integrity and conflict avoidance

Securely add honeypot secret to server validation, configure in local .env for data protection.

Setting Up Honeypot Security for Server Environment Variables

Consistent Encryption with Honeypot Server

Dad Joke Break Honeypot

Honeypot

Intro to CSRF

Implement CSRF protection: Generate tokens, set secure cookies, associate with clients, and use environment variables.

Implement Node.js CSRF utility: Generate tokens, secure cookies, prevent cross-site request forgery attacks.  

Creating and Managing CSRF Tokens With Node.js

CSRF Protection with Cookies 

Protect user data with authenticity tokens: Render, verify, and enhance user experience.

Secure forms with Authenticity Token input and CSRF validation for protection against tampering. Improve security and error responses.

Security with Authenticity Token and CSRF Validation

Authenticity With Token Protection 

Dad Joke Break CSRF

Cross-Site Request Forgery

Intro to Rate Limit 

Learn how to implement rate limiting middleware in Express for efficient resource management in your server.

Safeguarding Your Server: Adding Rate Limit Configuration

Optimizing Your Express Server with Rate Limiting Middleware

Implement tiered rate limiting: Strong for sign-up/login, moderate for posts, and general defense. Custom middleware assigns tiers.

Professional Web Forms

Professional Web Forms

Transcript

Focus Management for Better User Experience

Transcript