Keyboard Friendly Menu Button
ReactJS
Medium
6 views
Problem Description
Create a menu button that toggles a list and supports keyboard focus style.
Output Format
Render a React component.
Constraints
Use :focus-visible style in a style tag.
Official Solution
import React, { useState } from 'react';
export default function App() {
const [open, setOpen] = useState(false);
return (
<div style={{ padding: 16 }}>
<style>{'button:focus-visible{outline:3px solid #ffb200; outline-offset:2px}'}</style>
<button type='button' onClick={() => setOpen((v) => !v)} style={{ padding: '10px 14px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>
Menu
</button>
{open ? (
<ul style={{ marginTop: 10, paddingLeft: 18 }}>
<li>Topics</li>
<li>Practice</li>
<li>Profile</li>
</ul>
) : null}
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!