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

Multiple-choice question radio and checkbox accessibility/design issues

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test this issue on recent versions Chrome, Firefox, Safari, Edge and IE.

      If you are using macOS, make sure you have enabled System Preferences > Keyboard > Shortcuts > Use keyboard navigation to move focus between controls.

      Prepare the test:

      1. Login as admin.
      2. Create a new course.
      3. Restore the attached quiz backup file in your course.
      4. Attempt the Quiz.

      Test for Safari

      1. On Safari try using the tab key to navigate to the question answers in the quiz.
      2. Verify you can see a focus outline around the question answers when focussed.
      3. Look at the radios and checkboxes.
      4. Verify the radio and checkbox sizes appear to have a good size like shown in this screenshot: 
      5. Look at question 8
      6. Verify the question answer appear inline with the radios like shown in this screenshot:

      Test for the other browsers:

      1. Attempt the restored Quiz.
      2. Check if the radio buttons and inputs can be focussed using the keyboard.
      3. Repeat the above steps 5 and 6.
      Show
      Please test this issue on recent versions Chrome, Firefox, Safari, Edge and IE. If you are using macOS, make sure you have enabled System Preferences > Keyboard > Shortcuts > Use keyboard navigation to move focus between controls . Prepare the test: Login as admin. Create a new course. Restore the attached quiz backup file in your course. Attempt the Quiz. Test for Safari On Safari try using the tab key to navigate to the question answers in the quiz. Verify  you can see a focus outline around the question answers when focussed. Look at the radios and checkboxes. Verify the radio and checkbox sizes appear to have a good size like shown in this screenshot:  Look at question 8 Verify  the question answer appear inline with the radios like shown in this screenshot: Test for the other browsers: Attempt the restored Quiz. Check if the radio buttons and inputs can be focussed using the keyboard. Repeat the above steps 5 and 6.
    • Affected Branches:
      MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-68963-master

      Description

      There are 3 quiz question issues:

      For question type multichoice the radio buttons appear too small on the Safari browser

      On Chrome:

      On Safari:

      For question type calculated multichoice the question start on a second line, this issue was fixed for MDL-68761 but the css should have been applied to qtype_calculatedmulti too:

      In Safari, when using the keyboard to focus elements on the page, the input types radio and checkbox don't show the focus styles introduced in MDL-67874

        Attachments

        1. backup-moodle2-activity-746-quiz746-20200608-1452-nu.mbz
          963 kB
        2. chrome-radios.png
          chrome-radios.png
          824 kB
        3. qtype-calculatedmultichoice.png
          qtype-calculatedmultichoice.png
          855 kB
        4. qtype-calculatedmultichoice-okay.png
          qtype-calculatedmultichoice-okay.png
          731 kB
        5. safari-radios.png
          safari-radios.png
          917 kB
        6. safari-radios-okay.png
          safari-radios-okay.png
          843 kB
        7. screenshot-1.png
          screenshot-1.png
          240 kB

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Integrator:
              Víctor Déniz Falcón
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Tim Hunt, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Bas Brands
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 hours, 35 minutes
                  4h 35m