Icon Only Button Accessibility
ReactJS
Medium
6 views
Problem Description
Create an icon-only button that is accessible using aria-label.
Output Format
Render a React component.
Constraints
Do not rely on icon text for accessibility.
Official Solution
import React from 'react';
export function IconButton({ label, onClick }) {
return (
<button
type='button'
aria-label={label}
onClick={onClick}
style={{ width: 40, height: 40, borderRadius: 12, border: '1px solid #ddd', background: '#fff', display: 'grid', placeItems: 'center' }}
>
<span aria-hidden='true' style={{ fontSize: 18 }}>≡</span>
</button>
);
}
export default function App() {
return <IconButton label='Open menu' onClick={() => {}} />;
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!