Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus is not getting back on the Hamburger icon after hitting escape #16974

Closed
vaishnavi-115 opened this issue Feb 8, 2022 · 10 comments · Fixed by #17003
Closed

Focus is not getting back on the Hamburger icon after hitting escape #16974

vaishnavi-115 opened this issue Feb 8, 2022 · 10 comments · Fixed by #17003

Comments

@vaishnavi-115
Copy link

Expected Behaviour:
After clicking enter on Hamburger icon of the piecharts menu and then hitting on escape button, the focus should stay on the hamburger icon of the pie charts menu.

Actual Behaviour
After hitting on escape button, the focus is being highlighted on the to Pie chart and the Bar diagram

Live demo with steps to reproduce:
https://jsfiddle.net/Marshen/u39ey50L/54/

Product version
HighCharts version : v9.3.3.

Affected browser(s)
Chrome, Edge

@highsoft-bot highsoft-bot added this to To do in Development-Flow Feb 8, 2022
@vaishnavi-115
Copy link
Author

Hi Team,
Please look into this issue and kindly let us know the ETA of the fix

@raf18seb
Copy link
Contributor

raf18seb commented Feb 9, 2022

Hi @vaishnavi-115, thank you for creating a ticket.

I checked and it's working fine, see a GIF:
focus-menu

Could you please provide more info? What system and browser are you using? Thank you in advance!

@vaishnavi-115
Copy link
Author

vaishnavi-115 commented Feb 9, 2022

Hi @raf18seb
Thank you for responding.
This issue is observed after tabbing to Full screen mode in Created Orders Hamburger menu and exiting from it. After exiting from full screen mode of Created Orders section, the issue can be observed in Overall status menu icon.

@raf18seb
Copy link
Contributor

raf18seb commented Feb 10, 2022

@vaishnavi-115,

Forgive me, but I'm still not able to reproduce it.

Steps I made:

  • focus hamburger menu of pie chart
  • press enter
  • press enter again to enter the fullscreen mode
  • now I tried both: 1) press escape to exit fullscreen mode - the hamburger of pie chart was focused 2) press enter to open menu and press enter again to exit fullscreen mode with button click - again, the hamburger of pie chart was focused

Could you provide a GIF of your behavior with information what operating system and browser are you using?

focus-menu

@vaishnavi-115
Copy link
Author

vaishnavi-115 commented Feb 13, 2022

Hi @raf18seb ,
Please follow the below steps:
1.Tab to Hamburger menu icon of Created Orders.
2. Enter View In Full Screen
3. Exit Full screen
4. Tab to Hamburger menu icon of Overall Status.
5. Press Enter( the menu is expanded)
6. Press Escape
The issue can be observed now.
Operating system - Windows
Browsers - Chrome and Edge.

Thank you.

@raf18seb
Copy link
Contributor

Thank you for providing the exact steps! I was able to reproduce it.

FYI @oysteinmoseng

@oysteinmoseng
Copy link
Member

Minimal example: https://jsfiddle.net/oysteinmoseng/czkd5p9o/
I will look at this ASAP.

@oysteinmoseng
Copy link
Member

@vaishnavi-115 This fix will be released with Highcharts v10 within the next two weeks.

@vaishnavi-115
Copy link
Author

Hi @oysteinmoseng ,
Thank you for the response. If possible, can you please expedite the release and provide the fix at an earlier date. This issue is part of a bug which was ideally supposed to be closed by now, but is still open.

@raf18seb
Copy link
Contributor

Hi @vaishnavi-115!

Unfortunately, we started preparations for a v10 release and we are not able to provide a hotfix release now again.
The official date of the Highcharts v10 release is March 10th.

At the time being, you can use this drop-in fix as a workaround: https://jsfiddle.net/BlackLabel/f05yhbnk/

(function(H) {
  const MenuComponent = H._modules['Accessibility/Components/MenuComponent.js'],
    getExportMenuButtonElement = function(chart) {
      return chart.exportSVGElements && chart.exportSVGElements[0];
    },
    getFakeMouseEvent = H._modules['Accessibility/Utils/HTMLUtilities.js'].getFakeMouseEvent,
    unhideChartElementFromAT = H._modules['Accessibility/Utils/ChartUtilities.js'].unhideChartElementFromAT,
    KeyboardNavigation = H._modules['Accessibility/KeyboardNavigation.js'];

  MenuComponent.prototype.onKbdClick = function(keyboardNavigationHandler) {
    var chart = this.chart;
    var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
    var exportButtonElement = getExportMenuButtonElement(chart).element;

    if (chart.openMenu) {
      this.fakeClickEvent(curHighlightedItem);
    } else {
      this.fakeClickEvent(exportButtonElement);
      chart.highlightExportItem(0);
    }
    return keyboardNavigationHandler.response.success;
  };

  MenuComponent.prototype.onMenuHidden = function() {
    var menu = this.chart.exportContextMenu;
    if (menu) {
      menu.setAttribute('aria-hidden', 'true');
    }

    this.setExportButtonExpandedState('false');
  };

  MenuComponent.prototype.onMenuShown = function() {
    var chart = this.chart,
      menu = chart.exportContextMenu;
    if (menu) {
      this.addAccessibleContextMenuAttribs();
      unhideChartElementFromAT(chart, menu);
    }

    this.setExportButtonExpandedState('true');
  };

  H.Chart.prototype.hideExportMenu = function() {
    var chart = this,
      exportList = chart.exportDivElements;

    if (exportList && chart.exportContextMenu && chart.openMenu) {
      // Reset hover states etc.
      exportList.forEach(function(el) {
        if (el &&
          el.className === 'highcharts-menu-item' &&
          el.onmouseout) {
          el.onmouseout(getFakeMouseEvent('mouseout'));
        }
      });
      chart.highlightedExportItemIx = 0;
      // Hide the menu div
      chart.exportContextMenu.hideMenu();
      // Make sure the chart has focus and can capture keyboard events
      chart.container.focus();
    }
  }

  KeyboardNavigation.prototype.onMouseUp = function() {
    delete this.isClickingChart;
    if (!this.keyboardReset && !this.pointerIsOverChart) {
      var chart = this.chart,
        curMod = this.modules &&
        this.modules[this.currentModuleIx || 0];
      if (curMod && curMod.terminate) {
        curMod.terminate();
      }
      if (chart.focusElement) {
        chart.focusElement.removeFocusBorder();
        delete chart.focusElement;
      }
      this.currentModuleIx = 0;
      this.keyboardReset = true;
    }
  };

  KeyboardNavigation.prototype.addExitAnchorEventsToEl = function(element) {
    var chart = this.chart,
      keyboardNavigation = this;
    this.eventProvider.addEvent(element, 'focus', function(ev) {
      var e = ev || win.event,
        focusComesFromChart = (e.relatedTarget &&
          chart.container.contains(e.relatedTarget)),
        comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);

      if (chart.focusElement) {
        delete chart.focusElement;
      }

      if (comingInBackwards) {
        // Focus the container instead
        keyboardNavigation.tabbingInBackwards = true;
        keyboardNavigation.tabindexContainer.focus();
        delete keyboardNavigation.tabbingInBackwards;
        e.preventDefault();
        // Move to last valid keyboard nav module
        // Note the we don't run it, just set the index
        if (keyboardNavigation.modules &&
          keyboardNavigation.modules.length) {
          keyboardNavigation.currentModuleIx =
            keyboardNavigation.modules.length - 1;
          var curModule = keyboardNavigation.modules[keyboardNavigation.currentModuleIx];
          // Validate the module
          if (curModule &&
            curModule.validate && !curModule.validate()) {
            // Invalid. Try moving backwards to find next valid.
            keyboardNavigation.prev();
          } else if (curModule) {
            // We have a valid module, init it
            curModule.init(-1);
          }
        }
      } else {
        // Don't skip the next focus, we only skip once.
        keyboardNavigation.exiting = false;
      }
    });
  };
})(Highcharts)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Development

Successfully merging a pull request may close this issue.

3 participants