Skip to content

Commit 5bc25d3

Browse files
Add accessibility note to interactivity section in the new React docs (#6026)
* Add accessibility note to interactivity section in the new React docs * Add a11y note to Responding to Events section * Update responding-to-events.md --------- Co-authored-by: dan <[email protected]>
1 parent bea2ff7 commit 5bc25d3

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

src/content/learn/responding-to-events.md

+6
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,12 @@ button { margin-right: 10px; }
313313
</Sandpack>
314314
315315
Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
316+
317+
<Note>
318+
319+
Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<div onClick={handleClick}>`. Using a real browser `<button>` enables built-in browser behaviors like keyboard navigation. If you don't like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. [Learn more about writing accessible markup.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
320+
321+
</Note>
316322
317323
## Event propagation {/*event-propagation*/}
318324

0 commit comments

Comments
 (0)