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

Checkbox and advanced checkbox elements can have duplicate labels

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_310_STABLE, MOODLE_39_STABLE
    • MDL-70288-master-2
    • 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.
    • 0
    • Internationals - 3.11 Sprint 2, Internationals - 3.11 Sprint 3, Internationals - 3.11 Sprint 4, Internationals - 3.11 Sprint 5

      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.

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

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Simey Lameze Simey Lameze
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                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

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