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

Allow HTML in Custom Menu

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Reopened
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.7.4, 3.8, 3.9
    • Fix Version/s: None
    • Component/s: Accessibility, Navigation
    • Labels:
    • Testing Instructions:
      Hide

      Before you begin, make sure your Moodle site is using the default Boost theme as some 3rd party themes may override Moodle's default behaviour.

      1. Log into Moodle as a Moodle Administrator.
      2. Navigate to Site Administration > Apperance > Theme > Theme settings
      3. In the Custom menu items field, add:
        *How to edit <abbr title="Hyper Text Markup Language">HTML</abbr>|*
      4. Scroll down to the bottom of the page and click Save Changes.

      Before the fix is applied: View the HTML source code for the How to edit HTML link. You will see that the <abbr> tag has been removed and the title attribute has been lost. This is incorrect this leaves us unable to add expansion to the acronym and therefore an accessibility issue.

      After the fix is applied, refresh the page. You may need to clear the Moodle or your web browser cache (I did not need to). Hover over the HTML acronym in the top navigation menu. You will see an expansion for the abbreviation. Now view the HTML source code for the How to edit HTML link. You will see that the <abbr> tag is still there. 

       

      Show
      Before you begin, make sure your Moodle site is using the default Boost theme as some 3rd party themes may override Moodle's default behaviour. Log into Moodle as a Moodle Administrator . Navigate to Site Administration > Apperance > Theme > Theme settings In the  Custom menu items field, add: *How to edit <abbr title="Hyper Text Markup Language">HTML</abbr>|* Scroll down to the bottom of the page and click Save Changes . Before the fix is applied: View the HTML source code for the  How to edit HTML  link. You will see that the <abbr> tag has been removed and the title attribute has been lost. This is incorrect this leaves us unable to add expansion to the acronym and therefore an accessibility issue. After the fix is applied, refresh the page. You may need to clear the Moodle or your web browser cache (I did not need to). Hover over the HTML acronym in the top navigation menu. You will see an expansion for the abbreviation. Now view the HTML source code for the  How to edit HTML  link. You will see that the <abbr> tag is still there.   
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Pull Master Branch:
      MDL-66856-master

      Description

      Moodle custom menus are unnecessary stripped of all HTML. This is not desirable as there are situations where one might want to include some HTML. Normally this is done for security reasons however Moodle Custom Menus are only editable by elevated roles.

      How to reproduce the issue

      Here are a couple of example describing situations where it would be desirable to be able to include HTML in a text of a menu item:

      In the first example, the <ABBR> tag is required for accessibility in order to provide an expansion of acronyms.

      How to edit <abbr title="Hyper Text Markup Language">HTML</abbr>|...

      While this example demonstrates using the well known acronym HTML, there are many other situations where the acronym might not be as well known. Example:

      <abbr title="Gender Based Analysis Plus">GBA+</abbr>|...

      A second example demonstrates how one might want to include FontAwesome icons in a menu item using the <i> tag:

      <i class="fa fa-question"></i>Help|/mod/page/...

      or

      <span class="fa fa-question"></span>Help|/mod/page/...

      While not an accessibility issue, it is a nice to have for the UI and UX. Example:

      What currently happens

      If you tried adding the above mentioned sample code, you will find that the HTML tags have been stripped out before being displayed. Example:

      While the icons are purely aesthetic, the acronym/abbreviation issue is a real situation issue and the fix for one addresses both issues.

      On a side note, it is actually desirable for Moodle Custom Menus to be passed through limited Moodle filters as described in MDL-63219, just not filter out HTML.

        Attachments

        1. 66856-before.png
          66856-before.png
          246 kB
        2. 66856-withpatch.png
          66856-withpatch.png
          253 kB
        3. image-2019-11-09-08-00-20-992.png
          image-2019-11-09-08-00-20-992.png
          3 kB
        4. image-2019-11-09-08-09-08-825.png
          image-2019-11-09-08-09-08-825.png
          6 kB
        5. MDL-66856-after.png
          MDL-66856-after.png
          53 kB

          Issue Links

            Activity

              People

              Assignee:
              michael-milette Michael Milette
              Reporter:
              michael-milette Michael Milette
              Peer reviewer:
              Mathew May
              Integrator:
              Andrew Nicols
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
              Votes:
              1 Vote for this issue
              Watchers:
              10 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 7 hours
                  7h