Closed Bug 1574054 Opened 3 months ago Closed 2 months ago

[RTL] Navigating through devtools tabs with arrow keys is reversed

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(firefox71 verified)

VERIFIED FIXED
Firefox 71
Tracking Status
firefox71 --- verified

People

(Reporter: itiel_yn8, Assigned: mv, Mentored)

Details

(Keywords: good-first-bug, rtl)

Attachments

(1 file)

Using Windows 10, latest Nightly.

STR:

  1. In about:config change 'intl.uidirection' to 1 and restart Nightly
  2. Open devtools
  3. Focus e.g. the Inspector tab
  4. Press the left arrow key to move to the devtools tab on the left

AR:
Focus goes to the tab on Inspector's right.

ER:
Focus should have gone to the tab on the left.

Component: Keyboard Navigation → Inspector
Product: Firefox → DevTools

The same applies to the Inspector inner tabs.

Thank you for finding this.

Priority: -- → P3

The Tabs component (devtools/client/shared/components/tabs/Tabs.js) seems to handle highlighting the tabs on arrow key press, but it doesn't take into account the document language direction.

    onKeyDown(event) {
      // Bail out if the focus isn't on a tab.
      if (!event.target.closest(".tabs-menu-item")) {
        return;
      }

      let activeTab = this.state.activeTab;
      const tabCount = this.props.children.length;

      switch (event.code) {
        case "ArrowRight":
          activeTab = Math.min(tabCount - 1, activeTab + 1);
          break;
        case "ArrowLeft":
          activeTab = Math.max(0, activeTab - 1);
          break;
      }

      if (this.state.activeTab != activeTab) {
        this.setActive(activeTab);
      }
    }

With a bit of guidance, I believe this could be a good candidate for a good-first-bug.
I'll assign myself as a mentor and help anyone who wants to work on it.

To get your development set up, please start here: https://docs.firefox-dev.tools/

Mentor: rcaliman
Keywords: good-first-bug

Hi! Going to try and tackle this. I'll submit an initial patch, though I feel like I'll need some help for tests.

Fix arrow keys behavior on tabs when document direction is RTL

Assignee: nobody → mv
Status: NEW → ASSIGNED
Keywords: checkin-needed

Pushed by malexandru@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6847c6c481f3
Fix arrow keys behavior on tabs when document direction is RTL. r=rcaliman

Keywords: checkin-needed
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.