fix(rtl): support applying dir="rtl" on DOM elements other than the body

[marosoft]

Create a single function to check text direction based on dir attribute on DOM element or document.

Fixes #11016 Fixes #9754

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[x] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

A whole document is expected to be set as RTL even when a dir attribute is set properly on an individual element.
Issue Number: #11016, #9754

What is the new behavior?

It is possible to use dir attribute on an element to override a document's dir value.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[Splaktar]

I just have a few minor requests for changes and a question.

It would be good to add some documentation for this feature somewhere. Perhaps in a Localization Guide in docs/content/localization using Markdown?

[Splaktar]

@marosoft can you please rebase this PR and address the review comments when you get a chance?

[marosoft]

@Splaktar I noticed that bidi is mentioned in the Migration Guide.
In the util.js file there are three methods related: isRtl, bidi and bidiProperty.

[Splaktar]

I suggested some improvements to the JSDoc.

Thanks for the notes for the Migration guide. Would you be interested in adding those to the guide in another PR after this one gets merged?

[marosoft]

I suggested some improvements to the JSDoc.

Thanks for the notes for the Migration guide. Would you be interested in adding those to the guide in another PR after this one gets merged?

@Splaktar I made the suggested changes, thanks for those.
I can add the notes to the guide. Do I need to create an issue for that or can I reference any existing one?

[Splaktar]

No issue needed. Please just reference this PR. Thank you!

[Splaktar]

I would really like some basic unit tests to verify this functionality if possible, but I don't want to block getting this in for many weeks. Please let me know if you can add a couple basic tests soon, otherwise, can you please open an issue to add tests for this?

Also can you please open an issue to create a new Localization Guide in docs/content/localization (using Markdown)?

Thank you for this important work!

[marosoft]

@Splaktar I found this issue which I might use as a reference for the documentation: #8615

I might find some time over the weekend to add some basic unit tests. Do you want me to add those for each component impacted by the change together with the changes I made to util.js ?

[Splaktar]

Ideally, it would be nice to see a couple tests for each affected component (in their spec.js files) and then some more general tests in util.spec.js. It would help us make sure that this functionality kept working over the long term.

Affected components

• menu
• panel
• slider
• sticky
• tabs
• grid-list
• virtual-repeat

Good catch on that RTL docs issue!