Skip to content

Investigate code duplication between cc-dialog and cc-drawer #1650

@pdesoyres-cc

Description

@pdesoyres-cc

Context

cc-dialog and cc-drawer share significant implementation details since both are built on top of the native <dialog> element with modal behavior.

Shared code

  • Properties: heading, open
  • Internal state: _dialogRef, _openerElement
  • Public methods: show(), hide()
  • Private methods: _autofocusOnOpen(), _tryToFocusOpenerElement(), _onDialogClose()
  • Lifecycle logic: Opening/closing behavior in updated(), focus restoration in disconnectedCallback()
  • Events: CcOpenEvent, CcCloseEvent, CcFocusRestorationFailEvent
  • Styles: ::backdrop styling, accessibilityStyles

Why this matters

  • Code duplication increases maintenance burden
  • Risk of inconsistent behavior if one component is updated but not the other
  • Shared accessibility and focus management logic should behave identically

Next steps

Evaluate whether and how to reduce this duplication (mixin, base class, controller, or leave as-is if the cost outweighs the benefits).

Metadata

Metadata

Assignees

No one assigned

    Labels

    maintenanceCode refactoring, project structure, dev tooling (storybook, dev server, npm tasks...)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions