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

HTML Editors in a Group are missing their label element

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Blocker 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")

      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.

        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

            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

              Created:
              Updated:
              Resolved:

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

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