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

Ionic 5: Wrong element highlighted when clicking

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 3.9.5
    • Fix Version/s: None
    • Component/s: Accessibility
    • Labels:
    • Affected Branches:
      MOODLE_39_STABLE
    • Sprint:
      Moodle App 4.0

      Description

      This happens in several areas of the app, so far I've seen it:

      • In the course page, when clicking a module the completion box is highlighted.
      • In ddwtos questions, clicking a drag item highlights a link in the question text.
      • In ddimageortext questions, clicking a drag item highlights a link in the question text.

      This highlight is caused by document.activeElement, but I don't know why a wrong element is focused, especially because the clicked element and the focused one aren't parent/children, they're children of sibling elements. Maybe some Ionic magic causes that. Adding stopPropagation and preventDefault doesn't fix it. Putting both elements in different ion-items fixes the issue, but it breaks the D&D question so we cannot do that.

      This issue doesn't affect ddmarker questions though, the reason is that Moodle returns the drag items with tabindex=0. Elements with "tabindex" are considered selectable, so in this case the dragitem is highlighted. This tabindex was added in this commit.

      Adding "tabindex" or similar in the app to the other D&D questions will fix the issue when clicking the draggable items, but clicking anywhere else will still highlight the link so IMO it's not the proper solution.

        Attachments

          Activity

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            dpalou Dani Palou
            Participants:
            Component watchers:
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated: