Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-2940

<core-icon> label attribute does not work on Ionic icons

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Done
    • Affects Version/s: 3.6.0
    • Fix Version/s: 3.7.0
    • Component/s: Libraries
    • Labels:
    • Testing Instructions:
      Hide
      1. In an app development environment, search for and open the file core-sitehome-index.html (note: you can actually use any file, this is just the easiest to get to because by default the app starts there).
      2. Immediately after the <ion-list> opening tag, copy and paste in the code block including two <ion-item>tags from the description of this issue.
      3. Build the app and run it in a browser using developer tools.
      4. Connect to a server if necessary. The server should be configured to show the site home page, otherwise navigate to it.
      5. In the generated source, examine the two <ion-icon> tags at the top of the page next to the text Icon 1 and Icon 2 (trash and star).
        • EXPECTED: The tags should have aria-label values set to "I am a frog" or "I am also a frog" respectively.
      Show
      In an app development environment, search for and open the file core-sitehome-index.html (note: you can actually use any file, this is just the easiest to get to because by default the app starts there). Immediately after the <ion-list> opening tag, copy and paste in the code block including two <ion-item>tags from the description of this issue. Build the app and run it in a browser using developer tools. Connect to a server if necessary. The server should be configured to show the site home page, otherwise navigate to it. In the generated source, examine the two <ion-icon> tags at the top of the page next to the text Icon 1 and Icon 2 (trash and star). EXPECTED: The tags should have aria-label values set to "I am a frog" or "I am also a frog" respectively.
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE
    • Pull Master Branch:
    • Sprint:
      Moodle App 3.7.0

      Description

      If you create a couple of core-icons (one example using Ionic icon, one example using FontAwesome) and insert them somewhere suitable, such as just inside the start of the ion-list in core-sitehome-index.html:

              <ion-item>
                  <core-icon name="trash" item-start label="I am a frog"></core-icon>
                  Icon 1
              </ion-item>
              <ion-item>
                  <core-icon name="fa-star" item-start label="I am also a frog"></core-icon>
                  Icon 2
              </ion-item>
      

      The icons display correctly. However, the resulting HTML for each icon looks like this (excerpt):

      <ion-icon role="img" class="icon icon-md ion-md-trash" aria-label="trash" name="trash" item-start="" ng-reflect-name="trash"></ion-icon>

      <ion-icon class="icon fa fa-star" aria-label="I am also a frog" name="fa-star" item-start=""></ion-icon>

      The FontAwesome icon includes the specified aria-label value, but the Ionic icon does not. This is because the Ionic ion-icon is a 'real' one wired up using Angular and there is code in the <ion-icon> which overrides the aria-label. The FontAwesome ion-icon is a 'fake' one created in the DOM which is not connected to an Angular component, so the manual code in core-icon which sets the aria-label is not overridden.

        Attachments

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                7/Jun/19