Dialog

Overview

The dialog component is a Vue component that displays content on top of the main page, requiring user interaction before returning to the underlying content. It is ideal for complex interactions such as forms, multi-step processes, or actions that need focused attention. For simpler needs like displaying messages, consider using a modal instead.

Basic usage

Importing the component

To implement the dialog component, import the necessary components and styles:

                                                        
                                                        
                                                            import { DsDialog, DsButton } from "@coloplast/design-system"; 
                                                        import "@coloplast/design-system/dist/components/modal/ds-dialog.css";
                                                        
                                                            

Example usage

Below is a simple example of how to use the dialog component:

                                                        
                                                        
                                                            <!-- Trigger button to open the dialog -->
                                                        <DsButton aria-haspopup="dialog" @click="open">Open dialog</DsButton>
                                                        
                                                        <!-- Dialog component -->
                                                        <DsDialog
                                                          :isOpen="isOpen"
                                                          @close-modal="close"
                                                          closeLabel="Close"
                                                          title="My first dialog"
                                                        >
                                                          <!-- Actions passed via the #actions template -->
                                                          <template #actions>
                                                            <DsButton variant="primary" @click="submit">Submit</DsButton>
                                                            <DsButton variant="ghost" @click="close">Cancel</DsButton>
                                                          </template>
                                                          <!-- Default slot for content -->
                                                          <p>
                                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere
                                                            laoreet neque ac pellentesque. Etiam consectetur elit quis lobortis
                                                            suscipit.
                                                          </p>
                                                        </DsDialog>
                                                        
                                                            

Component playground and props

You can explore the dialog component in Storybook to test and adjust its props through the ‘Controls’ tab. For further documentation, visit Dialog component in Storybook.

Accessibility

The dialog component comes with built-in accessibility features:

• Focus management: When the dialog opens, focus shifts to the first interactive element (typically the close button). On close, focus returns to the triggering element.
• Focus trapping: While open, keyboard navigation is contained within the dialog, preventing interaction with elements outside the dialog.
• ARIA roles: The dialog uses a native <dialog> element with aria-labelledby for the title and aria-label for the close button, ensuring assistive technology users can easily interact with the component.

Developer responsibilities:

• Trigger button: Ensure the trigger element (e.g., DsButton) is accessible and uses aria-haspopup="dialog" to indicate that a dialog will open.
• Labels: Provide clear, descriptive labels for the dialog and any action buttons like 'Submit' or 'Cancel'.
• Close label: Localise the close label to the user's language.

Internationalisation

The dialog component supports right-to-left (RTL) languages and includes the ability to localise the label for the close button.

SEO

To enhance SEO, consider server-rendering the dialog’s content when its information is critical. For non-essential content, it’s better to keep it dynamically rendered.