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

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

    XMLWordPrintable

    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

      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.

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  12/Nov/12