RTL bugs

[FaridAghili]

• Windows 10

• Google Chrome 87

• a weird bug in form-switch:
  

  Notice the switch circle which isn't vertically centered.
  It only happens in unchecked unfocused state, not when checked or when it has focus.

• In this url, please take a look at this:
  

  I guess we should flip this chevrons like this:

  

  Which can be done with transform: rotate(180deg). Also the transform-origin can be increased to .6em to have more space between chevron and text.

• Carousel direction is wrong in RTL when changed by keyboard or touch, however left/right icons works correct on click See fix

[FaridAghili]

I can confirm first bug is fixed (switch circle)

[FaridAghili]

About the carousel keyboard and touch which currently changes slide in wrong direction in RTL layout, It can be fixed to behave as expected in both RTL and LTR with very little change:

bootstrap/js/src/carousel.js

Line 37 in be85391

const ARROW_LEFT_KEY = 'ArrowLeft'

Change to:

const ARROW_LEFT_KEY = isRTL ? 'ArrowRight' : 'ArrowLeft'

bootstrap/js/src/carousel.js

Line 38 in be85391

const ARROW_RIGHT_KEY = 'ArrowRight'

Change to:

const ARROW_RIGHT_KEY = isRTL ? 'ArrowLeft' : 'ArrowRight'

These 2 changes fix keyboard direction.

Now for fixing touch direction:
1.

bootstrap/js/src/carousel.js

Line 257 in be85391

this.prev()

Change to:

isRTL ? this.next() : this.prev()

bootstrap/js/src/carousel.js

Line 262 in be85391

this.next()

Change to

isRTL ? this.prev() : this.next()

Also make sure to import isRTL from util:

// /js/src/carousel.js

import {
  getjQuery,
  onDOMContentLoaded,
  TRANSITION_END,
  emulateTransitionEnd,
  getElementFromSelector,
  getTransitionDurationFromElement,
  isVisible,
+  isRTL,
  reflow,
  triggerTransitionEnd,
  typeCheckConfig
} from './util/index'

@ffoodd @XhmikosR

[XhmikosR]

You can always make PRs @FaridAghili. But most importantly, we need to add JS tests for the changes in the RTL PR as mentioned in #32330.