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

              basbrands Bas Brands
              basbrands Bas Brands
              Victor Déniz Falcón Victor Déniz Falcón
              Janelle Barcega Janelle Barcega
              Jun Pataleta, Safat Shahin, Tim Hunt, Ilya Tregubov, Kevin Percy, Mathew May, Mihail Geshoski, Shamim Rezaie, Huong Nguyen, Bas Brands, Mathew May, Amaia Anabitarte, Carlos Escobedo, Laurent David, Mikel Martín Corrales, Sabina Abellan, Sara Arjona (@sarjona)
              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