Public - FE - Right to Left (RTL) - Add property

[ludtkemorgan]

In order to support Arabic on the site we need to support right to left (RTL) functionality.

In the Detroit repo, the majority of this was accomplished by setting the site "dir" when Arabic is selected. We also added an RTL Tailwind extension. There were a few places we had to directly customize CSS to manage RTL changes.

For this ticket, we'll just add the dir property. We won't be able to QA this until the new frontend work is in, so once this is added we'll be able to QA RTL in the UI as we go.

1. Add the "dir" property if Arabic is selected

if (locale && locale === "ar") {
      if (document.body.getAttribute("dir") !== "rtl") {
        document.body.setAttribute("dir", "rtl")
      }
    } else {
      document.body.removeAttribute("dir")
    }

[emilyjablonski]

We haven't tested seeds with RTL functionality. It's likely we will need to build RTL compatibility into seeds, which could require seeds changes to make class name adjustments from things like margin-left to margin-inline-start. We can add the dir and see what it looks like first, but we will need to do this seeds work as well. We might need to norm about margin-inline-start/end and margin-block-start/end over left/right in CSS.

[jaredcwhite]

Just adding a note that dir is best set on the root html element, not body per se:
https://www.w3.org/International/questions/qa-html-dir.en

Perhaps there's a reason it was on body in the previous repo, but I'll go into this assuming we should go with best practice. I'm also going to use an array of rtl languages rather than hard-coding a single ar check.