search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
17.87k stars 2.66k forks source link

WC3 Dialog: Replaces default rendered close button in ShadowDOM with user-provided close slot #29648

Closed brianchristopherbrady closed 2 weeks ago

brianchristopherbrady commented 7 months ago

Change to Dialog's Close Button Implementation in WC3

In the Fluent v9 implementation of the Dialog, setting the modalType to 'non-modal' triggers the display of a default close button. However, considering specific concerns inherent to web components, it's advisable not to replicate this exact behavior for the WC3 version.

This PR introduces the close slot in the dialog, offering developers the flexibility to specify their own close button content. The driving factors for this change are rooted in both accessibility (a11y) and performance implications associated with interactive elements in the shadowDOM.

Performance Considerations

Dynamic element generation can prompt unwanted reflows and repaints within the browser's rendering process. The intricacies are magnified when these elements reside within the shadowDOM, given its encapsulating nature. Through the provision of a close slot, developers can embed their custom close buttons, thus sidestepping potential performance issues.

Accessibility Considerations

Interactive components within the shadowDOM can sometimes interact inconsistently with assistive tools such as screen readers. The shadowDOM's encapsulated environment could challenge these tools in correctly identifying and engaging with the incorporated elements. By designating a dedicated slot for the close button that's external to the shadowDOM, we aim to deliver a more uniform and accessible user experience.

fabricteam commented 7 months ago

📊 Bundle size report

🤖 This report was generated against c991463ca01e86e4c6b3e5ff0ed9093de0d7e1e5

size-auditor[bot] commented 7 months ago

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: c991463ca01e86e4c6b3e5ff0ed9093de0d7e1e5 (build)

codesandbox-ci[bot] commented 7 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 838e65c832c412b9ae162cce04e55f6f16c2930e:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
JustSlone commented 2 weeks ago

@brianchristopherbrady closing as that is the only way to stop notifying reviewers. Please update your PR to point to master following this guide: https://github.com/microsoft/fluentui/pull/31361 and reopen when it's updated. Thanks!