Problem with accessibilityLayer in RTL

[arturjackowiak]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://release--63da8268a0da9970db6992aa.chromatic.com/?path=/docs/api-accessibility--docs

Steps to reproduce

Open chart in RTL

What is expected?

On RTL the left arrow should focus the next point and the right arrow the previous one.

What is actually happening?

On RTL the left arrow focus the previous point and the right arrow the next one.

Environment	Info
Recharts	v2.12.1
React	Any
System	Any
Browser	Any

---

Function keyboardEvent is not adapted to RTL

public keyboardEvent(e: any) {
    // The AccessibilityManager relies on the Tooltip component. When tooltips suddenly stop existing,
    // it can cause errors. We use this function to check. We don't want arrow keys to be processed
    // if there are no tooltips, since that will cause unexpected behavior of users.
    if (this.coordinateList.length === 0) {
      return;
    }

    switch (e.key) {
      case 'ArrowRight': {
        if (this.layout !== 'horizontal') {
          return;
        }
        this.activeIndex = Math.min(this.activeIndex   1, this.coordinateList.length - 1);
        this.spoofMouse();
        break;
      }
      case 'ArrowLeft': {
        if (this.layout !== 'horizontal') {
          return;
        }
        this.activeIndex = Math.max(this.activeIndex - 1, 0);
        this.spoofMouse();
        break;
      }
      default: {
        break;
      }
    }
  }

[ckifer]

Hi, I'm confused. Why would the right arrow go to the previous and the left arrow go to the next? The code you pasted is how things behave unless I'm missing the point

[ckifer]

OH, "RTL" stands for "right to left" not "react testing library" 🙃

[ckifer]

@julianna-langston FYI

[julianna-langston]

How do you "open chart in rtl"? Is that a browser setting, or are we modifying the Rechart code?

[arturjackowiak]

How do you "open chart in rtl"? Is that a browser setting, or are we modifying the Rechart code?

In my app, we use

const checkIsRtl = () => document.dir === 'rtl' || document.body.dir === 'rtl'

and then

<XAxis
                            reversed={isRtl}

<YAxis
                            orientation={isRtl ? 'right' : 'left'}

[arturjackowiak]

Screenshot from my storybook

[ckifer]

@arturjackowiak added support in PR #4225

This probably won't be backported to 2.x though, it'll be there in 3