Moodle
  1. Moodle
  2. MDL-34975

Misleading "click to expand or collapse" text, with usability/accessibility issues

    Details

    • Testing Instructions:
      Hide

      Test pre-requisites

      • JavaScript enabled
      • Purge all caches in browser and moodle.

      Test steps

      1. Navigate to Home ► Site administration ► Users ► Permissions ► Check system permissions
      2. Make sure you can expand/collapse the search options clicking the icon
      3. Make sure you can expand/collapse the search options clicking search options
      1. Navigate to Home ► Courses ► Some Course ► Question bank ► Questions
      2. Create a new multiple choice question
      3. Preview the question
      4. Make sure you can expand/collapse Technical information clicking the icon
      5. Make sure you can expand/collapse Technical information clicking Technical information

      (Please note that I'm aware of the help button being in encapsulate in the <a> but this is not a regression, this was already the case before)

      Show
      Test pre-requisites JavaScript enabled Purge all caches in browser and moodle. Test steps Navigate to Home ► Site administration ► Users ► Permissions ► Check system permissions Make sure you can expand/collapse the search options clicking the icon Make sure you can expand/collapse the search options clicking search options Navigate to Home ► Courses ► Some Course ► Question bank ► Questions Create a new multiple choice question Preview the question Make sure you can expand/collapse Technical information clicking the icon Make sure you can expand/collapse Technical information clicking Technical information (Please note that I'm aware of the help button being in encapsulate in the <a> but this is not a regression, this was already the case before)
    • Affected Branches:
      MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_22_STABLE, MOODLE_23_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-34975-master
    • Rank:
      43561

      Description

      On this page:

      {/admin/roles/check.php?contextid=1}

      and various others with a search box that returns users, there's an expandable set of advanced options at the bottom.

      If you hover over the header text ("Search Options" in english) you get a pop-up which shows the title text: "Click to expand or collapse". However, clicking on the text does nothing. To expand/collapse the options you need to click on the arrow image at the end of the text.

      This arrow image has two accessibility issues. One, it's a very small click target, which makes it hard for people to use on iPhones, iPads etc. and two, although it's the only thing inside a click-able anchor tag, the image has no alt text.

      I'd suggest making the the clickable area the whole text, which solves both problems. I'd also think about changing the open/close state to a class that gets toggled, rather than directly changing an img src (which is what I assume is happening now). This gives many more options for presenting the change in state.

        Issue Links

          Activity

          Hide
          Michael de Raadt added a comment -

          Thanks for reporting that.

          That is not really a good example of a Moodle form. Perhaps these options could become advanced options and handled like a normal form. But any change would be better.

          Feel free to work on this with us.

          Show
          Michael de Raadt added a comment - Thanks for reporting that. That is not really a good example of a Moodle form. Perhaps these options could become advanced options and handled like a normal form. But any change would be better. Feel free to work on this with us.
          Hide
          Frédéric Massart added a comment -

          The present logic was willing to make the text clickable but the .get('children') method does not include text nodes, using the loop in the patch I include all the present nodes in the caption. I also moved the title to the <a> tag as it makes more sense. Regarding swaping the icon using classes, I don't think we're using icons as background very often for now, so I did not change it. Although I think that would probably be better. What do you reviewers think about it?

          Show
          Frédéric Massart added a comment - The present logic was willing to make the text clickable but the .get('children') method does not include text nodes, using the loop in the patch I include all the present nodes in the caption. I also moved the title to the <a> tag as it makes more sense. Regarding swaping the icon using classes, I don't think we're using icons as background very often for now, so I did not change it. Although I think that would probably be better. What do you reviewers think about it?
          Hide
          Adrian Greeve added a comment -

          Hi Fred,

          I think that the code change is good. I did notice that when previewing the question, if you hit the help link it also expands and collapses the technical information. Ideally I don't think this should happen.

          I don't think that the open / close state needs to be put into class. We're not swapping the img as guessed in the description.

          I hope that helps,

          Thanks.

          Show
          Adrian Greeve added a comment - Hi Fred, I think that the code change is good. I did notice that when previewing the question, if you hit the help link it also expands and collapses the technical information. Ideally I don't think this should happen. I don't think that the open / close state needs to be put into class. We're not swapping the img as guessed in the description. I hope that helps, Thanks.
          Hide
          Frédéric Massart added a comment -

          Thanks for your review Adrian. You are right about the behaviour in questions, it is incorrect and should not expand the element, but this is an issue that comes from the question API and is not introduced by this bug. Pushing for integration. Cheers!

          Show
          Frédéric Massart added a comment - Thanks for your review Adrian. You are right about the behaviour in questions, it is incorrect and should not expand the element, but this is an issue that comes from the question API and is not introduced by this bug. Pushing for integration. Cheers!
          Hide
          Eloy Lafuente (stronk7) added a comment -

          The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week.

          TIA and ciao

          Show
          Eloy Lafuente (stronk7) added a comment - The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week. TIA and ciao
          Hide
          Dan Poltawski added a comment -

          Looks good, integrated to 2.2, 2.3 and master.

          thanks Fred

          Show
          Dan Poltawski added a comment - Looks good, integrated to 2.2, 2.3 and master. thanks Fred
          Hide
          Ankit Agarwal added a comment -

          22 MCQ doesn't have technical information tab.
          Anyway that is not relevant to this patch. Rest seems working fine.
          Passing
          Thanks

          Show
          Ankit Agarwal added a comment - 22 MCQ doesn't have technical information tab. Anyway that is not relevant to this patch. Rest seems working fine. Passing Thanks
          Hide
          Dan Poltawski added a comment -

          Congratulations, you've done it!

          Thanks, this change is now in the latest weekly release!

          Join the crowds of people tomorrow from 8am and download this Moodle release from your local apple store!

          Show
          Dan Poltawski added a comment - Congratulations, you've done it! Thanks, this change is now in the latest weekly release! Join the crowds of people tomorrow from 8am and download this Moodle release from your local apple store!

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: