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

HTML Editors in a Group are missing their label element

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • Blocker
    • 3.9.18, 3.11.11, 4.0.5
    • 3.9.17, 3.11.10, 4.0.4
    • Forms Library
    • MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE
    • MDL-75910-master
    • Hide
      1. Turn off messaging, so it doesn't get in the way of this test. Add the following to your config.php:

        $CFG->messaging = false;
        

      2. Place the attached file, mdl75910.php into the root of your moodle dir
      3. Navigate to http://[yourmoodle]/mdl75910.php
      4. Open your browsers developer tools, and in the console run:

        document.querySelectorAll('textarea').forEach((textarea) => {console.log(`Inspecting textarea ${textarea.id} and looking for its label`); console.log(textarea);console.log(document.querySelector(`[for="${textarea.id}"]`));})
        

        1. Confirm that the following textareas have a label:
          1. id="id_title"
          2. id="id_content"
            Note: There may be other text areas too (e.g. if you didn't turn off messaging), but we don't care about them here
        2. Confirm that the following labels have a sr-only class on them:
          1. for="id_content"
        3. Confirm that the label you see for the id_content is not visible on the page
        4. Confirm that the label you see for the id_content is different to the label for the group ("Example label for the group")
      Show
      Turn off messaging, so it doesn't get in the way of this test. Add the following to your config.php: $CFG ->messaging = false; Place the attached file, mdl75910.php into the root of your moodle dir Navigate to http://[yourmoodle]/mdl75910.php Open your browsers developer tools, and in the console run: document.querySelectorAll('textarea').forEach((textarea) => {console.log(`Inspecting textarea ${textarea.id} and looking for its label`); console.log(textarea);console.log(document.querySelector(`[for="${textarea.id}"]`));}) Confirm that the following textareas have a label : id="id_title" id="id_content" Note: There may be other text areas too (e.g. if you didn't turn off messaging), but we don't care about them here Confirm that the following labels have a sr-only class on them : for="id_content" Confirm that the label you see for the id_content is not visible on the page Confirm that the label you see for the id_content is different to the label for the group ("Example label for the group")

    Description

      When an editor is used in a form as part of a group, it is missing its label element. This can have implications for
      Behat, because Behat is unable to determine the element type properly for an editor, and therefore treats any Editors
      which in in a form group as a plain textarea.

      At the moment this is not noticed because Atto does not overwrite the textarea unless there are changes within Atto, so a change to the textarea is submitted but does not match the on-screen content.

      With the work on MDL-75071 this changes because the TinyMCE editor takes its own value as canonical and overwrites the textarea on form submission.

      This happens because there is no inline template for the editor, and therefore it reverts to using the old toHtml function. The legacy function does not cater to the editor being in a group, and therefore does not add the hidden label.

      In addition, the hiddenLabel attribute was missing from the editor element. This is a semi-standard element but must be added to each supporting element.

      Both the missing inline template for the editor, and the hidden label attribute must be present:

      • If the hidden label attribute is not present, then the standard inline template will add a visible label within the group.
      • If the inline editor template is missing, then the label is not shown at all.

      Attachments

        1. MDL-75910_master.png
          MDL-75910_master.png
          92 kB
        2. MDL-75910_v311.png
          MDL-75910_v311.png
          95 kB
        3. MDL-75910_v400.png
          MDL-75910_v400.png
          98 kB
        4. mdl75910.php
          2 kB

        Issue Links

          Activity

            People

              dobedobedoh Andrew Lyons
              dobedobedoh Andrew Lyons
              Simey Lameze Simey Lameze
              Jun Pataleta Jun Pataleta
              John Edward Pedregosa John Edward Pedregosa
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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