ember-mobile-menu icon indicating copy to clipboard operation
ember-mobile-menu copied to clipboard

Published 20 hours ago • verified publisher icon nickschot

Simplify with popover API?

Open NullVoxPopuli opened this issue 1 year ago • 3 comments

https://twitter.com/Una/status/1729236000294174733

Support:

  • https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
  • https://caniuse.com/mdn-api_htmlelement_popover

NullVoxPopuli avatar Nov 27 '23 22:11 NullVoxPopuli

Yes, this seems like a nice path! Though, I guess it may be wise to wait for firefox to enable it by default.

johanrd avatar Dec 01 '23 11:12 johanrd

This would probably also fix where our a11y is currently lacking (no built-in connection between the toggle button and the menu)

nickschot avatar Dec 01 '23 16:12 nickschot

I was tempted to try it out a bit now, as I have very good experience with the popover api so far for other use cases (except this extremely silly safari bug).

Notes after trying: The use cases fit generally well for ember-mobile-menu, except popover's superpower of being placed in the browser top-layer means that ember-mobile-menu needs a different approach to shadowing and masking to support e.g. the iOS style where the menu is underneath:

Screenshot 2024-03-16 at 13 08 00

This could of course be solvable with some masking and inset shadow, but posting as a note to consider anyways.

johanrd avatar Mar 16 '24 12:03 johanrd