Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72645

Two Nav-Drawer Buttons Click Issue

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.11.3
    • Fix Version/s: None
    • Labels:
    • Affected Branches:
      MOODLE_311_STABLE
    • Testing Instructions:
      Hide

      To reproduce current issue

      1. Use Boost theme
      2. Use code from https://github.com/sameer-ah/moodle/tree/MDL-72645-311_reproduce . It duplicates code at https://github.com/moodle/moodle/blob/7e96939f68f5264448afe94a0ab098db66be75e0/theme/boost/templates/navbar.mustache#L22-L24 to create an additional nav-drawer button.
      3. Switch between the two buttons to close/open nav-drawer.
      4. nav-drawer close/open requires an extra click. 

      Test cases after patch is applied

      Test case 1: Current behavior not broken

      1. Use Boost theme
      2. Use code from https://github.com/sameer-ah/moodle/tree/MDL-72645-311_fix with the fix applied.
      3.  Clicking on nav-drawer button closes/opens nav-drawer.

      Test case 2: After adding an additional nav-drawer button extra click is not required

      1. Use Boost theme
      2. Use code from https://github.com/sameer-ah/moodle/tree/MDL-72645-311_fix_two_buttons . It duplicates code at https://github.com/moodle/moodle/blob/7e96939f68f5264448afe94a0ab098db66be75e0/theme/boost/templates/navbar.mustache#L22-L24 to create an additional nav-drawer button and the fix is applied.
      3. Switch between the two buttons to close/open nav-drawer.
      4. nav-drawer close/open requires only one click. 
      Show
      To reproduce current issue Use Boost theme Use code from https://github.com/sameer-ah/moodle/tree/MDL-72645-311_reproduce  . It duplicates code at  https://github.com/moodle/moodle/blob/7e96939f68f5264448afe94a0ab098db66be75e0/theme/boost/templates/navbar.mustache#L22-L24  to create an additional nav-drawer button. Switch between the two buttons to close/open nav-drawer. nav-drawer close/open requires an extra click.  Test cases after patch is applied Test case 1: Current behavior not broken Use Boost theme Use code from https://github.com/sameer-ah/moodle/tree/MDL-72645-311_fix  with the fix applied.  Clicking on nav-drawer button closes/opens nav-drawer. Test case 2 : After adding an additional nav-drawer button extra click is not required Use Boost theme Use code from https://github.com/sameer-ah/moodle/tree/MDL-72645-311_fix_two_buttons  . It duplicates code at  https://github.com/moodle/moodle/blob/7e96939f68f5264448afe94a0ab098db66be75e0/theme/boost/templates/navbar.mustache#L22-L24  to create an additional nav-drawer button and the fix is applied. Switch between the two buttons to close/open nav-drawer. nav-drawer close/open requires only one click. 

      Description

      Hello,

      In our Moodle theme, in order to address an accessibility issue, we are planning to have two buttons for nav-drawer. The additional chevron/close button will be used to close the nav-drawer. The issue is when switching between the two buttons, user is forced to do an extra click to open/close the nav-drawer. Upon debugging, it turns out the issue is caused by Moodle boost theme code at 

      https://github.com/moodle/moodle/blob/7e96939f68f5264448afe94a0ab098db66be75e0/theme/boost/amd/src/drawer.js#L119

      and 

      https://github.com/moodle/moodle/blob/7e96939f68f5264448afe94a0ab098db66be75e0/theme/boost/amd/src/drawer.js#L130

       

      Since, on these lines attribute is only changed for one button, an extra click is needed. If code on the above lines is changed to  

      $('[data-action=toggle-drawer]').attr('aria-expanded''true');

      and

      $('[data-action=toggle-drawer]').attr('aria-expanded''false');
      

      respectively, it works as expected.  

      The patch is available at https://github.com/sameer-ah/moodle/tree/MDL-72645-311_fix and diff url is https://github.com/moodle/moodle/compare/MOODLE_311_STABLE...sameer-ah:MDL-72645-311_fix?expand=1. 

      Instructions to reproduce

      Steps:

       

        Attachments

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            sameer.ahmed Sameer Ahmed
            Participants:
            Component watchers:
            Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan, Huong Nguyen, Bas Brands, Mathew May
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated: