mirror of https://github.com/vercel/next.js.git synced 2026-09-20 02:25:18 +08:00

Files

T

History

niketchandivade 520de42f19 fix: improve form accessibility by associating labels with inputs (#96335 )

## Summary

This PR improves the accessibility of the `with-apivideo-upload` example
by associating form labels with their corresponding form controls using
the `htmlFor` attribute.

## Changes

- Added `htmlFor="link"` to the "Play button color" label.
- Added `htmlFor="linkHover"` to the "Buttons hover color" label.
- Added an `id` to the "Hide controls" checkbox and associated its label
using `htmlFor`.

## Why

Associating labels with their corresponding form controls improves
accessibility by:

- Allowing screen readers to correctly announce form labels.
- Enabling users to focus or toggle controls by clicking their labels.
- Following HTML and WCAG best practices for accessible forms.

## Before

- Labels were visually displayed but were not programmatically
associated with their respective inputs.

## After

- Each label is associated with its corresponding form control via
`htmlFor` and `id`, improving accessibility without changing
functionality.

### Testing

- Verified that clicking each label focuses or toggles the associated
control.
- No visual changes.

Co-authored-by: Marcos Hernanz <96699542+marcoshernanz@users.noreply.github.com>

2026-08-18 22:33:46 +00:00

components

…

pages

fix: improve form accessibility by associating labels with inputs (#96335 )

2026-08-18 22:33:46 +00:00

public

…

style

…

.env.local.example

…

.gitignore

…

next.config.js

…

package.json

…

README.md

…

tsconfig.json

Use the automatic runtime for type checking (#83159 )

2025-09-02 12:35:42 +02:00

README.md

api.video video uploader

This video uploader and playback app is built with Next.js and api.video, the video first API.

Demo

https://with-apivideo.vercel.app/videos

Deploy your own

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-apivideo with-apivideo-app

yarn create next-app --example with-apivideo with-apivideo-app

pnpm create next-app --example with-apivideo with-apivideo-app

Deploy it to the cloud with Vercel (Documentation).

Getting started

1. Create an api.video free account

Go to dashboard.api.video, log in or create a free account.
You can choose to stay in sandbox and have watermark over your videos, or enter in production mode and take advantage of all the features without limitations.

2. Get you API key

Once in the dashboard, find your API keys directly in the /overview or navigate to /apikeys with the "API Keys" button in the side navigation.
Copy your API key, and paste it in .env.local.example as value for API_KEY.
Rename .env.local.example to .env.local.
Install the packages by running npm install, yarn install or pnpm install.
You can now try the application locally by running npm run dev, yarn dev or pnpm dev from the root directory.

3. Deployment

First, push your app to GitHub/GitLab or Bitbucket
Then, go to Vercel and import your new repository.
Add an environment variable with name API_KEY and your API key for value.
Click on deploy 🎉