red-hat-design-system icon indicating copy to clipboard operation
red-hat-design-system copied to clipboard

[feat] `<rh-overlay>`

Open zeroedin opened this issue 3 years ago • 5 comments

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

zeroedin avatar May 12 '22 14:05 zeroedin

let's consider using native <dialog> under the hood for semantics and a11y

bennypowers avatar May 12 '22 14:05 bennypowers

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.

zeroedin avatar May 12 '22 16:05 zeroedin

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?

bennypowers avatar May 29 '22 08:05 bennypowers

Will need re-visiting in the future. Keeping open for now.

CC: @zeroedin

markcaron avatar Feb 08 '24 15:02 markcaron