From 5bc25d3c36b6e67cd2d86a1145daf6dfa21d4f40 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Thu, 18 May 2023 12:48:40 -0400
Subject: [PATCH] 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 <dan.abramov@gmail.com>
---
 src/content/learn/responding-to-events.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 782b6c0f1..4450c4613 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -313,6 +313,12 @@ button { margin-right: 10px; }
 </Sandpack>
 
 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.
+  
+<Note>
+
+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)
+  
+</Note>
 
 ## Event propagation {/*event-propagation*/}