thorium-reader icon indicating copy to clipboard operation
thorium-reader copied to clipboard

[PARKED] (DO NOT MERGE) attempt to fix #678 by migrating the reader's sidemenu into an overlay portal

Open danielweck opened this issue 6 years ago • 1 comments

Same React technique as modal dialog and popup menu, in order to set aria-hidden on the principal app viewport (screen reader), and ensure consistency between keyboard focus lock (cycle within the sidemenu) and mouse interaction (top bar button icons should not be interacted with when the menu is open, if keyboard cannot access them without closing the menu first)

This PR currently fails, because of:

  1. CSS containment hierarchy is broken, so the menu styles are screwed (notably, the sliders)
  2. click-to-close outside of the sidemenu needs to be re-implemented following the same design pattern as modal dialog and popup menu (in addition to visual blurred / translucent background overlay)
  3. sidemenu needs to stretch the whole height

danielweck avatar Sep 05 '19 13:09 danielweck

Point of interest: if the CSS styles were componentized instead of centralized (see reader-app.css), it would be a lot easier to scope changes to a particular React component (in this case: to migrate a whole set of related styles to the modal React portal). Right now the hard-scoping with #ID is a brittle design approach, and the monolithic CSS file is very hard to maintain / refactor. So, related issue: https://github.com/readium/readium-desktop/issues/410

danielweck avatar Sep 05 '19 13:09 danielweck