Don't put event handlers on non-interactive elements

[oliverjam]

solent-mind/pages/contact.js

Lines 13 to 16 in 986c608

	<GiHamburgerMenu
	onClick={() => {
	setOpen(true);
	}}

One of React's biggest flaws is how easy it makes it to add interactive behaviour to inappropriate elements 😅. Here you've added a click handler to an <svg>. However <svg>s are not usually interactive—by default they aren't focusable, you can't trigger them with your keyboard, and assistive tech won't tell users they are clickable.

Generally when you want a clickable thing your first thought should be <button>. Buttons have all the above interactive behaviour built-in. You can style them to be totally invisible and put the icons inside of them.

If you really need to make a non-interactive element like a div or svg clickable you need to do a bunch more work:

• make it focusable with tabindex
• add onKeyDown for spacebar/enter to trigger
• add the right ARIA role for the type of component it is
• do lots of testing to make sure it works with assistive tech

It's almost always easier to just use a button 😅