Tabs

For a horizontal tablist the ARIA pattern says ArrowRight moves to the next tab in LTR. In RTL that meaning inverts, so ArrowLeft becomes "next" and ArrowRight becomes "previous". Read direction at runtime from getComputedStyle(list).direction or list.matches(":dir(rtl)") and multiply your step by -1. Never infer it from the UI language, since any single container can be flipped on its own. Home and End do not swap: Home is always the first tab in DOM order, which in Arabic is the rightmost one.

offsetLeft measures from the left edge whatever the direction, so a bar position derived from it lands under the wrong tab in RTL. Measure from the logical start instead: in LTR tab.getBoundingClientRect().left − list.left, in RTL list.right − tab.right. Then move the bar with inset-inline-start, or with translateX multiplied by a --dir variable set to -1 under [dir="rtl"], because translateX itself is physical and does not mirror with the page.

The strip rests at its logical start, which in Arabic is the right edge. In current browsers scrollLeft is 0 at that edge and goes negative as you scroll leftwards, so a "next" button written as el.scrollLeft += 200 scrolls the wrong way, and any comparison against the scroll offset has to go through Math.abs. Use el.scrollBy({ left: delta * dir }) or, better, scrollIntoView({ inline: "nearest" }), which works on the logical axis. Also replace scroll-padding-left with scroll-padding-inline-start.

to right and to left are always physical, because linear-gradient accepts no logical direction keywords. The fade that says "there is more" will therefore not mirror itself, however the page direction is set. Anchor the two overlays with inset-inline-start and inset-inline-end so they move to the correct side on their own, then flip the gradient angle under [dir="rtl"] or feed it from a --fade-angle variable. The same limit applies to mask-image if you fade by masking instead.

Do not reverse the tab order with flex-direction: row-reverse. direction: rtl alone already puts the first tab on the right, whereas row-reverse flips the picture and leaves DOM order untouched. The spec states outright that flexbox visual reordering does not affect navigation order, so the arrow keys end up moving against what the eye sees. Likewise aria-orientation describes the layout axis, not the language, so it stays "horizontal" in Arabic. Neutral tab icons (a settings gear, a cart, a bell) never mirror.