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

Multiple-choice question radio and checkbox accessibility/design issues

    XMLWordPrintable

Details

    • 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.

    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
          Bas Brands
        2. chrome-radios.png
          824 kB
          Bas Brands
        3. qtype-calculatedmultichoice.png
          855 kB
          Bas Brands
        4. qtype-calculatedmultichoice-okay.png
          731 kB
          Bas Brands
        5. safari-radios.png
          917 kB
          Bas Brands
        6. safari-radios-okay.png
          843 kB
          Bas Brands
        7. screenshot-1.png
          240 kB
          Janelle Barcega

        Issue Links

          Activity

            People

              basbrands Bas Brands
              basbrands Bas Brands
              Víctor Déniz Falcón Víctor Déniz Falcón
              Janelle Barcega Janelle Barcega
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Safat Shahin, Tim Hunt, Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                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