I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png
The section highlighted in green is a div. Here is the code snippet:
import { useState } from "react";
import "./styles.css";
export default function App() {
const [insideApp, setInsideApp] = useState(false);
return (
<div onFocus={() => setInsideApp(true)} onBlur={() => setInsideApp(false)}>
<div className="App">
<input className="input" />
{insideApp && <button>Show Button</button>}
</div>
<p>Out of Box content</p>
</div>
);
}
/* css */
.App {
display: flex;
border: 2px solid aqua;
align-items: center;
column-gap: 2vw;
padding: 2rem;
}
.App:focus-within {
border: 2px solid lime;
}
.input {
flex: auto;
}
My goal is to highlight the button when navigating with the tab key, as shown below:
https://i.sstatic.net/EXCWB.png
However, because I am conditionally rendering the button, I lose focus. Can someone provide an innovative solution to achieve the desired behavior? I want the div to change to lime color when focused and ensure that both input and button are accessible through tab navigation.
Additionally, I only want the button to be displayed when the focus is within the div.