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

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

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Done
    • Icon: Minor Minor
    • 3.7.0
    • 3.6.0
    • Libraries
    • 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.
    • MOODLE_36_STABLE
    • MOODLE_37_STABLE
    • Moodle App 3.7.0

      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.

            quen Sam Marshall
            quen Sam Marshall
            Pau Ferrer Pau Ferrer
            Juan Leyva Juan Leyva
            Dani Palou Dani Palou
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

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