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

Checkbox and advanced checkbox elements can have duplicate labels

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      Requirements
      1. Axe tool
      2. Nu HTML validator
      Test
      1. Copy testcheckboxes.php to your Moodle root directory.
      2. Open it on your browser (e.g. "[YOUR_MOODLE_URL]/testcheckboxes.php")
      3. View the page source and validate it using the Nu HTML validator
      4. Confirm that you don't get any validation errors about related to the checkbox elements and their labels.
      5. Open your browser's dev tools. Go to the axe tab.
      6. On the test page, tab through all the form elements to show the validation errors until you reach the "Save changes" button.
      7. Back on the axe tab, analyse the page.
      8. Confirm that you don't get any validation errors related to the checkboxes and aria-described attributes.
      9. Right click on the "Sample required text" field and inspect it. You should see it's HTML code highlighted on the dev tools.
      10. With the error message still displayed, confirm that its "aria-describedby" attribute is set to "id_error_text_1"
      11. Enter some text it in and press tab.
      12. Confirm that its "aria-describedby" attribute has now disappeared along with its error message.
      13. Inspect Checkbox 1. You should see it's HTML code highlighted on the dev tools.
      14. With the error message still displayed, confirm that its "aria-describedby" attribute is set to "id_error_cbox1"
      15. Tick Checkbox 1.
      16. Confirm that its "aria-describedby" attribute has now disappeared along with its error message.
      17. Do the same for Checkbox 2 and confirm that the behaviour is the same as Checkbox 1's.
      18. Inspect Checkbox 3. You should see it's HTML code highlighted on the dev tools.
      19. With the error message still displayed, confirm that its "aria-describedby" attribute is set to "id_cbox3_description id_error_cbox3"
      20. Tick Checkbox 3.
      21. Confirm that its "aria-describedby" attribute is now set to "id_cbox3_description" and its error message has now disappeared.
      Show
      Requirements Axe tool Nu HTML validator Test Copy testcheckboxes.php to your Moodle root directory. Open it on your browser (e.g. " [YOUR_MOODLE_URL] /testcheckboxes.php ") View the page source and validate it using the Nu HTML validator Confirm that you don't get any validation errors about related to the checkbox elements and their labels. Open your browser's dev tools. Go to the axe tab. On the test page, tab through all the form elements to show the validation errors until you reach the " Save changes " button. Back on the axe tab, analyse the page. Confirm that you don't get any validation errors related to the checkboxes and aria-described attributes. Right click on the " Sample required text " field and inspect it. You should see it's HTML code highlighted on the dev tools. With the error message still displayed, confirm that its " aria-describedby " attribute is set to " id_error_text_1 " Enter some text it in and press tab. Confirm that its " aria-describedby " attribute has now disappeared along with its error message. Inspect Checkbox 1. You should see it's HTML code highlighted on the dev tools. With the error message still displayed, confirm that its " aria-describedby " attribute is set to " id_error_cbox1 " Tick Checkbox 1. Confirm that its " aria-describedby " attribute has now disappeared along with its error message. Do the same for Checkbox 2 and confirm that the behaviour is the same as Checkbox 1's. Inspect Checkbox 3. You should see it's HTML code highlighted on the dev tools. With the error message still displayed, confirm that its " aria-describedby " attribute is set to " id_cbox3_description id_error_cbox3 " Tick Checkbox 3. Confirm that its " aria-describedby " attribute is now set to " id_cbox3_description " and its error message has now disappeared.
    • Affected Branches:
      MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE, MOODLE_39_STABLE
    • Pull 3.9 Branch:
      MDL-70288-39-2
    • Pull 3.10 Branch:
      MDL-70288-310-2
    • Pull 3.11 Branch:
      MDL-70288-311-2
    • Pull Master Branch:
      MDL-70288-master-2
    • Story Points:
      0
    • Sprint:
      Internationals - 3.11 Sprint 2, Internationals - 3.11 Sprint 3, Internationals - 3.11 Sprint 4, Internationals - 3.11 Sprint 5

      Description

      If you create a checkbox or an advanced checkbox element with a label and a text, you'll end up with two label elements for the checkbox which is invalid as it can prevent assistive technologies from reading the appropriate label for the element.

      To reproduce:

      1. Go to the "Export" page of a Database activity.
      2. Run WAVE on it.
      3. Result: You'll see "Multiple form labels" errors.

        Attachments

        1. MDL-70288.jpg
          MDL-70288.jpg
          107 kB
        2. MDL-70288 master.png
          MDL-70288 master.png
          54 kB
        3. testcheckboxes.php
          2 kB

          Issue Links

            Activity

              People

              Assignee:
              jpataleta Jun Pataleta
              Reporter:
              jpataleta Jun Pataleta
              Peer reviewer:
              Simey Lameze
              Integrator:
              Sara Arjona (@sarjona)
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                8/Mar/21

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 5 hours, 6 minutes
                  1d 5h 6m