RTL modal puts header text next to close button

[a-alhusaini]

Describe the issue

When creating a modal with the dialog tag. The close button shows up on the right side when dir is set to rtl which makes it show up before the text on the page.

Expected Behavior

The close button for modals should appear on the left when dir is set to rtl.

As you can see here, the close button shows up on the right side instead of the left side as would be expected. The docs mention that float: right; is used to ensure the button stays in that position.

Possible solution

Write a css selector that checks if the dialog or one of its parents has dir="rtl" and set a rule within that selector that stipulates that the close button must be floated to the left in that scenario.