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

Multiple-choice question radio and checkbox accessibility/design issues

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-68963-master
    • 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.

      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

        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

            basbrands Bas Brands
            basbrands Bas Brands
            Victor Déniz Falcón Victor Déniz Falcón
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

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

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.