Skip to content

Conversation

@rubencarvalho
Copy link
Contributor

@rubencarvalho rubencarvalho commented Dec 15, 2025

Description

This refactor removes the legacy JavaScript-based dir (text direction) management from SpectrumElement and replaces it with the modern CSS :dir() pseudo-class. The previous implementation used a MutationObserver to watch for dir attribute changes on document.documentElement and propagated these to child components. This approach required explicit dir attributes on elements and manual registration with sp-theme.

The new approach leverages the browser's native :dir() CSS pseudo-class, which automatically inherits directionality from the DOM hierarchy without requiring explicit attributes. This reduces JavaScript overhead, simplifies the component architecture, and improves performance.

Key changes:

  • Removed isLTR getter and dirParent tracking from SpectrumMixin
  • Removed connectedCallback/disconnectedCallback overrides that managed direction registration
  • Removed MutationObserver and observedForElements Set for tracking direction changes
  • Added simple dir getter using getComputedStyle(this).direction for JavaScript access when needed
  • Updated CSS files to replace [dir="ltr"]/[dir="rtl"] attribute selectors with :dir(ltr)/:dir(rtl)

Note:
The only expected VRT failures are due to a fix for a previously unknown sp-link RTL issue affecting multiple components.

Motivation and context

This refactor is in preparation for 2nd-gen components, which will not include this shared direction management logic. By moving to the CSS :dir() pseudo-class now, we ensure a consistent approach across both 1st-gen and 2nd-gen components, and reduce the surface area of shared code that needs to be maintained between generations.

The CSS :dir() pseudo-class is now well-supported across modern browsers and provides a more performant, declarative approach to handling text direction. It automatically inherits directionality from parent elements in the DOM hierarchy, eliminating the need for manual attribute management and JavaScript-based observation.

Related issue(s)

  • fixes SWC-1461

Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

@changeset-bot
Copy link

changeset-bot bot commented Dec 15, 2025

⚠️ No Changeset found

Latest commit: d59cc0d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Dec 15, 2025

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5936

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@rubencarvalho rubencarvalho changed the title chore(base): remove isLTR and dir management from SpectrumMixin chore(base): remove dir management from SpectrumMixin Dec 23, 2025
@rubencarvalho rubencarvalho changed the title chore(base): remove dir management from SpectrumMixin chore(base): remove dir management from SpectrumElemen Dec 23, 2025
@rubencarvalho rubencarvalho changed the title chore(base): remove dir management from SpectrumElemen chore(base): remove dir management from SpectrumElement Dec 23, 2025
@rubencarvalho rubencarvalho changed the title chore(base): remove dir management from SpectrumElement chore(base): remove dir management from SpectrumElement and sp-theme Dec 23, 2025
@Rajdeepc
Copy link
Contributor

Solid modernization effort, we just cleaned up 4+ years of workaround code.

@rubencarvalho rubencarvalho added the Status: Ready for review PR ready for review or re-review. label Jan 16, 2026
@rubencarvalho rubencarvalho marked this pull request as ready for review January 16, 2026 13:10
@rubencarvalho rubencarvalho requested a review from a team as a code owner January 16, 2026 13:10
static VERSION = version;

public override get dir(): CSSStyleDeclaration['direction'] {
return getComputedStyle(this).direction ?? 'ltr';
Copy link
Contributor

@Rajdeepc Rajdeepc Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None of our components read dir during construction phase so we are safe but this is a bit expensive. Can you work with some partner teams and check if this is something worth auditing?

Copy link
Contributor

@Rajdeepc Rajdeepc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing blocking.Coverage report flagging a few missing branches. If you could take a look at those and either add coverage or confirm they’re intentional, I’m happy to come back for a re-review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Status: Ready for review PR ready for review or re-review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants