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

ARIA role presentation conflicts with the empty alt

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-70829-403
    • MDL-70829-main
    • Hide

      Notes

      1. Behat tests pretty much cover the changes
      2. The manual tests involve inspecting the accessible names of elements on the accessibility tree, so it may be easier to test this on Firefox.

      Setup

      1. Set up a fresh Moodle site install
      2. Create a user s1.

      Context header

      1. Log in as admin
      2. Go to s1's profile page
      3. Inspect the accessible name of the Message and Add contact buttons.
      4. Confirm that the accessible names of the buttons are "Message" and "Add contact" and not "Message Message" and "Add contact Add contact"
      5. Press "Add contact". The button name will become "Remove contact"
      6. Inspect the accessible name of the Remove contact button.
      7. Confirm that the accessible name of the button is "Remove contact" and not "Remove contact Remove contact"
      8. Press "Remove contact". The button name will become "Add contact" again.
      9. Inspect the accessible name of the Add contact button.
      10. Confirm that the accessible name of the button is "Add contact" and not "Add contact Add contact"

      Form autocomplete user selection

      Learning plan user selector
      1. Go to Site administration > Competencies > Import competency framework
      2. Upload and import 041_CCSS.Math_httpcorestandards.orgMath_20170106_0445_comma_separated.csv
      3. Go to Site administration > Competencies > Learning plan templates
      4. Press "Add competencies to learning plan template"
      5. Add one or more competencies
      6. Go back to the Learning plan templates. You should see the learning plan template you created.
      7. Click the "0" link under the "Learning plans" column.
      8. Expand the list autocomplete element with the list of users by pressing the down arrow.
      9. Inspect the accessible name of a user from the list on the accessibility tree.
        • On Firefox, right-click on the user's name > Inspect Accessibility Properties
      10. Check the accessible name of the option node.
      11. Confirm that the option's accessible name includes the user's name and email and that the user's name is not duplicated.
      Manual enrolment user selector
      1. Create a course.
      2. Go to Participants > Enrol users
      3. Expand the list autocomplete element with the list of users by pressing the down arrow.
      4. Inspect the accessible name of a user from the list on the accessibility tree.
        • On Firefox, right-click on the user's name > Inspect Accessibility Properties
      5. Check the accessible name of the option node.
      6. Confirm that the option's accessible name includes the user's name and email. The user's name is not duplicated on the link's accessible name.

      Workshop

      1. Create a workshop. Enter the necessary information and click "Save and display"
      2. Inspect the accessibility properties of the generic container of the "Current phase" text.
      3. Confirm that the generic container only contains the "Current phase" text and not the solid circle icon.
      4. Inspect the accessible name of the other "Switch to xx" links.
      5. Confirm that the accessible name is not rendered twice on the accessibility tree. (e.g. "Switch to xx" and not "Switch to xx Switch to xx")
      Show
      Notes Behat tests pretty much cover the changes The manual tests involve inspecting the accessible names of elements on the accessibility tree, so it may be easier to test this on Firefox. Setup Set up a fresh Moodle site install Create a user s1. Context header Log in as admin Go to s1's profile page Inspect the accessible name of the Message and Add contact buttons. Confirm that the accessible names of the buttons are "Message" and "Add contact" and not "Message Message" and "Add contact Add contact" Press "Add contact". The button name will become "Remove contact" Inspect the accessible name of the Remove contact button. Confirm that the accessible name of the button is "Remove contact" and not "Remove contact Remove contact" Press "Remove contact". The button name will become "Add contact" again. Inspect the accessible name of the Add contact button. Confirm that the accessible name of the button is "Add contact" and not "Add contact Add contact" Form autocomplete user selection Learning plan user selector Go to Site administration > Competencies > Import competency framework Upload and import 041_CCSS.Math_httpcorestandards.orgMath_20170106_0445_comma_separated.csv Go to Site administration > Competencies > Learning plan templates Press "Add competencies to learning plan template" Add one or more competencies Go back to the Learning plan templates. You should see the learning plan template you created. Click the "0" link under the "Learning plans" column. Expand the list autocomplete element with the list of users by pressing the down arrow. Inspect the accessible name of a user from the list on the accessibility tree. On Firefox, right-click on the user's name > Inspect Accessibility Properties Check the accessible name of the option node. Confirm that the option's accessible name includes the user's name and email and that the user's name is not duplicated. Manual enrolment user selector Create a course. Go to Participants > Enrol users Expand the list autocomplete element with the list of users by pressing the down arrow. Inspect the accessible name of a user from the list on the accessibility tree. On Firefox, right-click on the user's name > Inspect Accessibility Properties Check the accessible name of the option node. Confirm that the option's accessible name includes the user's name and email. The user's name is not duplicated on the link's accessible name. Workshop Create a workshop. Enter the necessary information and click "Save and display" Inspect the accessibility properties of the generic container of the "Current phase" text. Confirm that the generic container only contains the "Current phase" text and not the solid circle icon. Inspect the accessible name of the other "Switch to xx" links. Confirm that the accessible name is not rendered twice on the accessibility tree. (e.g. "Switch to xx" and not "Switch to xx Switch to xx")
    • 1
    • WP Sprint 2024-I1.4 (Clones)

      The markup <img role="presentation" alt="alt text"> is contradictory.

      According to https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/presentation/PresentationRoleExamples.html, it is recommended that authors instead use empty alt text (alt="") where they use role="presentation".

      There are places such asĀ blocks/recentlyaccesseditems/templates/no-items.mustache and course/templates/no-courses.mustache that are using 'role="presentation"' with non-empty alt.

            jpataleta Jun Pataleta
            rezaie9 Shamim Rezaie
            Odei Alba Odei Alba
            Andrew Lyons Andrew Lyons
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            1 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 5 hours, 32 minutes
                1d 5h 32m

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