fix: Improve accessibility and code quality (#1985)

jhosep98 · web-flow · commit 27fcd7c9895b · 2025-11-13T13:15:40.000-06:00
* fix: Replace deprecated onKeyPress with onKeyDown

This commit updates the component to use the recommended onKeyDown event handler, resolving a deprecation warning in React.

* style: Fix lint error for non-null assertion

Replaced the non-null assertion with a type assertion 'as HTMLElement' to resolve a linting error. This change ensures better type safety and code quality.

* fix: Improve color contrast ratio

This commit adjusts the background and foreground colors to meet WCAG AA standards. This fix ensures that text is readable and accessible for all users, including those with low vision.

* style: Remove empty css ruleset

Removed the empty  class declaration. This is a code style cleanup that doesn't change functionality but improves the maintainability and readability of the codebase.

* docs: Add meta description to document and language attribute to root element

* fix: Associate labels with form elements

This commit ensures all form input elements are correctly associated with their labels using the 'for' attribute. This is a critical fix for users of assistive technologies and provides a better user experience for everyone.

* style: Use single quotes for HTML attributes
diff --git a/examples/react/public/App.css b/examples/react/public/App.css
@@ -25,10 +25,8 @@
   margin-bottom: 10px;
 }
 
-.react-player {}
-
 .faded {
-  color: rgba(0, 0, 0, .5);
+  color: rgba(0, 0, 0,.6);
 }
 
 .footer {
diff --git a/examples/react/public/index.html b/examples/react/public/index.html
@@ -1,9 +1,10 @@
 <!doctype html>
-<html>
+<html lang='en'>
   <head>
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>ReactPlayer Demo</title>
+    <meta name='description' content='A React component for playing a variety of URLs, including file paths, Mux, YouTube, Vimeo, and Wistia'>
     <link rel='stylesheet' href='./reset.css'>
     <link rel='stylesheet' href='./defaults.css'>
     <link rel='stylesheet' href='./range.css'>
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -309,9 +309,10 @@ const App = () => {
               </td>
             </tr>
             <tr>
-              <th>Seek</th>
+              <th><label htmlFor="seek">Seek</label></th>
               <td>
                 <input
+                  id="seek"
                   type="range"
                   min={0}
                   max={0.999999}
@@ -324,9 +325,10 @@ const App = () => {
               </td>
             </tr>
             <tr>
-              <th>Volume</th>
+              <th><label htmlFor="volume">Volume</label></th>
               <td>
                 <input
+                  id="volume"
                   type="range"
                   min={0}
                   max={1}
diff --git a/examples/react/src/index.tsx b/examples/react/src/index.tsx
@@ -3,5 +3,5 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 
 const container = document.getElementById('app');
-const root = createRoot(container!);
+const root = createRoot(container as HTMLElement);
 root.render(<App />);
diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -112,7 +112,7 @@ const Preview = ({
       className="react-player__preview"
       tabIndex={previewTabIndex}
       onClick={handleClick}
-      onKeyPress={handleKeyPress}
+      onKeyDown={handleKeyPress}
       {...(previewAriaLabel ? { 'aria-label': previewAriaLabel } : {})}
     >
       {isElement ? light : null}

Original file line number	Diff line number	Diff line change
`@@ -25,10 +25,8 @@`
`25`	`25`	`margin-bottom: 10px;`
`26`	`26`	`}`
`27`	`27`
`28`		`-.react-player {}`
`29`		`-`
`30`	`28`	`.faded {`
`31`		`- color: rgba(0, 0, 0, .5);`
	`29`	`+ color: rgba(0, 0, 0,.6);`
`32`	`30`	`}`
`33`	`31`
`34`	`32`	`.footer {`
Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ const Preview = ({`
`112`	`112`	`className="react-player__preview"`
`113`	`113`	`tabIndex={previewTabIndex}`
`114`	`114`	`onClick={handleClick}`
`115`		`- onKeyPress={handleKeyPress}`
	`115`	`+ onKeyDown={handleKeyPress}`
`116`	`116`	`{...(previewAriaLabel ? { 'aria-label': previewAriaLabel } : {})}`
`117`	`117`	`>`
`118`	`118`	`{isElement ? light : null}`