feat(playground): add settings button and group IR

[dhrjarun]

Summary

Demo

playground-demo.mov

Try to fix #2620

• Group Rome IR and Prettier IR into IR
  
• Add settings buttons
• fix overflow in SettingsMenu
  

Test Plan

[netlify]

✅ Deploy Preview for docs-rometools canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	08c166d
🔍 Latest deploy log	https://app.netlify.com/sites/docs-rometools/deploys/636d0154d1a8100009a5d7f7

[MichaReiser]

Hey @dhrjarun

Thanks for this contribution. I'm currently having permission issues with Netifly, so I cannot approve the preview build. I'm looking into it.

From the video, it seems to me that it's easily possible to accidentally open and directly close the settings menu again. Is this a problem or was it just a misclick from you when recording the video? How well does your solution work with keyboard-only navigation?

[dhrjarun]

Hi @MichaReiser In the video, the settings menu opened and closed directly cuz of reload. I haven't added any shortcut key to open settings menu.

[MichaReiser]

This is awesome!

I've two small improvement requests:

• Add the aria-pressed attribute and set it to true if the settings menu is open (and false otherwise)
• Do you have an idea of how to style the button when the menu is open? (you can use the [aria-pressed="true"] selector

[dhrjarun]

How about this?

[MichaReiser]

That could work

[dhrjarun]

When I have just onClick without onKeyDown, the button if focused and enter is pressed it gets a click which is desirable behaviour.

<button
	aria-label="Open or Close Settings Menu"
        aria-pressed={isSettingsVisible}
	onClick={() => setSettingVisible(!isSettingsVisible)}
	className="text-base text-slate-700 font-medium hover:text-slate-800 group"
	>
</button>

But It cause this error lint/a11y/useKeyWithClickEvents

When I add onKeyDown implementation like this it doesn't work.

<button
	aria-label="Open or Close Settings Menu"
        aria-pressed={isSettingsVisible}
	onClick={() => setSettingVisible(!isSettingsVisible)}
	onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {
		if (event.key === "Enter") {
			setSettingVisible(!isSettingsVisible);
		}
	}}
	className="text-base text-slate-700 font-medium hover:text-slate-800 group"
	>
</button>

If I add onKeyDown implementation like this every key press except Enter key makes the button click.

<button
	aria-label="Open or Close Settings Menu"
        aria-pressed={isSettingsVisible}
	onClick={() => setSettingVisible(!isSettingsVisible)}
	onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {
		setSettingVisible(!isSettingsVisible);
	}}
	className="text-base text-slate-700 font-medium hover:text-slate-800 group"
	>
</button>

I don't know if there is any use case of this rule lint/a11y/useKeyWithClickEvents with react in here.

[dhrjarun]

And here's with arrow

demo.mov

[MichaReiser]

When I have just onClick without onKeyDown, the button if focused and enter is pressed it gets a click which is desirable behaviour.

You can ignore (suppress) the rule for now. It's an issue with the lint rule. See #3644

Looks awesome! I really like the toggle animation

[MichaReiser]

Looks good. You only have to make sure that all files are correctly formatted with rome (You should be able to run pnpm format if you have Rust installed or use the VS Code extension)