fluent-react bindings should set the directionality of the page (rtl, ltr)

[gregtatum]

Currently when applying locales, the fluent-react bindings do not switch the document's text directionality. It's a little odd for React to affect the entire document, but here it seems like it would be the better and less surprising behavior.

I recently converted Firefox's about:profiling page to use Fluent React. However, a follow-up Bug 1688195 was filed as RTL support was not working. I was somewhat surprised that this was the case, as I would have assumed fluent-react to handle this for me.

One way to mitigate surprise for the end user would be to set the RTL direction, by default, and have a config option to opt out of the behavior.

[julienw]

I noticed that the lang property isn't set either (it should be set to the locale used).

I noticed that the devtools folks set the dir property manually: https://searchfox.org/mozilla-central/rev/69babd862de70cabfa1d0a369d38e4881bd41e4d/devtools/client/aboutdebugging/aboutdebugging.js#77
In about:debugging the lang property isn't set either.

But I noticed that other pages using Fluent work properly (both for dir and lang): about:newtab (also about:home), about:config. I believe that about:newtab uses fluent-react too. It's not clear to me how this works there.

[julienw]

I am under the impression that fluent-dom doesn't do it either. In Firefox there is a adhoc mechanism to do it automatically, but that it's not implemented in the generic library.