fix(rtl): respect dir of ancestor elements throughout components

[OS-jacobbell]

Issue number: internal

---

What is the current behavior?

Some components check document.dir === 'rtl' to determine whether to be left-to-right or right-to-left.

What is the new behavior?

• Components consistently use isRTL(this.el). This way, any element in the parent chain can define RTL, not just the root document element.
• The host element is a required parameter to isRTL.

Does this introduce a breaking change?

• Yes
• No

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 13, 2026 6:33pm UTC

[ShaneK]

Nice sweep of this! Just a few comments inline, though I'd want the test coverage added before it goes in.

[ShaneK]

Thanks for adding the tests and taking the suggestions! Most of them pass on main too though, so they aren't covering the change yet, and CI is red on the new popover one. I've left comments inline.

[ShaneK]

Really close! Just a few more comments inline.

[ShaneK]

This dir never gets removed on dismiss, and isRTL checks the host's own dir first, so every present after the first one reads back whatever was written the first time. If an app switches the document from ltr to rtl between presents, the popover gets positioned for rtl but its content still renders ltr, where on main the content follows the document. It also permanently replaces a dir="auto" someone set on the ion-popover.

This seems like a big issue since runtime language switching works on main today. Setting it only when the host doesn't already have a dir, and removing it on dismiss, fixed every case I tried without breaking the position tests:

if (!el.hasAttribute('dir')) {
  el.setAttribute('dir', isRTL(el) ? 'rtl' : 'ltr');
  this.dirSetOnPresent = true;
}

with a private dirSetOnPresent = false; field, and this in dismiss() right after detachComponent:

if (this.dirSetOnPresent) {
  this.el.removeAttribute('dir');
  this.dirSetOnPresent = false;
}

[ShaneK]

Suggested change

	await expect(nextPrevIcons.first()).toHaveClass(/flip-rtl/);
	await expect(nextPrevIcons.last()).toHaveClass(/flip-rtl/);
	await expect(nextPrevIcons.first()).toHaveClass(/icon-rtl/);
	await expect(nextPrevIcons.last()).toHaveClass(/icon-rtl/);

This one passes on main too, because ion-icon adds flip-rtl whenever flipRtl is set, whatever the direction is. The class that follows direction is icon-rtl, which is missing on main here and present with your change. The test above has the same gap, but it was already there, so up to you on that one. The describe title and its comment also still say RTL is set on the component.

[ShaneK]

Following up on push/pull from last round, the margins are covered now, but nothing asserts left or right, so hardcoding pull to right and push to left still leaves all three green. Something like this catches it and fails on main:

const cols = (n: number) => `calc(calc(${n} / var(--ion-grid-columns, 12)) * 100%)`;

it('should mirror push and pull when an ancestor declares rtl', async () => {
  const col = await newCol(`<div dir="rtl"><div>${COL_PARAMS}</div></div>`);
  expect(col.style.right).toBe(cols(2));
  expect(col.style.left).toBe(cols(1));
});

plus the reverse for the ltr-in-an-rtl-document case.

Also, this constant already includes the <ion-col> tags, and the tests wrap it in another <ion-col ...>, so <ion-col gets parsed as an attribute name and a stray > is left in the body. It only works by accident. I'd make this just the attributes.

[ShaneK]

Suggested change

	<div class="grid-item" , dir="rtl">
	<div class="grid-item" dir="rtl">

Stray comma here.