[feat] `<rh-overlay>`
Description
RHDS needs a utility "overlay" component that can be used in rh-nav, rh-secondary-nav and a possible future rh-modal or any other components that might need an opacity overlay layer. The component should be of singleton scope so that if multiple components need an overlay it's not overlaid more than once. The overlay component should be triggered with a custom ComposedEvent.
Acceptance Criteria
- [ ] Design done
- [ ] Development done
Image
No response
Link to design doc
No response
Other resources
No response
let's consider using native <dialog> under the hood for semantics and a11y
let's consider using native
<dialog>under the hood for semantics and a11y
Sorry, you might have to explain this more. The feature I'm describing in itself isn't a modal / dialog but just a non-contextual visual overlay for something like a modal covering the context of the page. If that does translate to a dialog for you help me understand.
Summarizing some discussion from various channels, <dialog> is PHAT, and might work semantically for various cases even things like popovers and flyouts, but we're concerned about some a11y implications, so we're holding off on adopting it.
Back to the question at hand, can we investigate if we can do this with a controller or directives (or both) rather than a new component?
Will need re-visiting in the future. Keeping open for now.
CC: @zeroedin