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

Messaging: add role button to the links in the message drawer

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test these UI changes on:

      1. Clean and Boost themes
      2. Supported browsers

      Setup

      1. Log in as an admin
      2. Create a course C1
      3. Enrol students s1, s2 and s3 to C1
      4. Create group g1 and enable group messaging
      5. Add s1, s2 and s3 to g1
      6. Logout
      7. Log in as s1
      8. Send some messages to s2 containing the "s" character
      9. Send some messages to s3
      10. Send some messages to g1
      11. Send a contact request to s2
      12. Star s2 conversation
      13. Log out.
      14. Log in as s2
      15. Accept s1 contact request
      16. Log out.
      17. Log in as s3
      18. Send a Contact request to s1

      Testing scenario 1: Overview

      1. Log in as s1
      2. CHECK the message icon with id="message-drawer-toggle-xxxxxxxxx" has the role="button" attribute
      3. Open the message drawer
      4. CHECK the settings button with data-route="view-settings" has the role="button" and aria-label="Settings" attributes
      5. CHECK the Contacts link with data-route="view-contacts" has the role="button" attribute
      6. Expand the "Starred" section
      7. CHECK the "a" element from the s2 conversation has the role="button" attribute
      8. Expand the "Group" section
      9. CHECK the "a" element from the g1 conversation has the role="button" attribute
      10. Expand the "Private" section
      11. CHECK the "a" element from the s3 conversation has the role="button" attribute 

      Testing scenario 2: Settings and Contacts/requests

      1. Log in as s1
      2. Open the message drawer
      3. Access to the Settings
      4. CHECK the back button has the role="button" attribute
      5. Click the back button
      6. Access to the Contacts
      7. CHECK the search icon has role="button" and aria-label="Search" attributes
      8. CHECK the s2 contact with data-region="contact"  has the role="button" attribute
      9. Access to the Requests
      10. CHECK the s3 contact request has the role="button" attribute
      11. CHECK the back button has the role="button" and the aria-label="Back to Messages overview" attributes

      Testing scenario 3: Search

      1. Log in as s1
      2. Open the message drawer
      3. Search for "s"
      4. CHECK any of the users displayed in the "Non-contacts" has the role="button" attribute in the "a" element
      5. CHECK any of the users displayed in the "Contacts" has the role="button" attribute in the "a" element
      6. CHECK any of the "Messages" has the role="button" attribute in the "a" element
      7. CHECK the back button has the role="button" and the aria-label="Back to Messages overview" attributes

      Testing scenario 4: Conversation

      1. Log in as s1
      2. Open the message drawer
      3. Expand the Group section
      4. Access to g1 conversation
      5. CHECK the back button has the role="button" and the aria-label="Back to Messages overview" attributes
      6. CHECK the user information with data-action="view-group-info" has the role="button" attribute in the "a" element
      7. CHECK the "x participants" information with data-action="view-group-info" has the role="button" attribute in the "a" element
      8. Click over the group name
      9. CHECK the back button has the role="button" and the aria-label="Back to Conversation with g1" attributes
      10. CHECK any of the users displayed in the "Other participants" has the role="button" attribute in the "a" element
      11. Click the back button
      12. Click the back button
      13. Expand the "Private" section
      14. Access to the s3 conversation
      15. CHECK the back button has the role="button" and the aria-label="Back to Messages overview" attributes
      16. CHECK the user information with data-action="view-contact" has the role="button" attribute in the "a" element

       

      Testing scenario 5: Notification preferences

      1. Log in as s1
      2. Access to Preferences
      3. Open "Notification preferences" page
      4. CHECK the "Email" link with a cog and the data-name="email" has the role="button" attribute
      Show
      Please test these UI changes on: Clean and Boost themes Supported browsers Setup Log in as an admin Create a course C1 Enrol students s1, s2 and s3 to C1 Create group g1 and enable group messaging Add s1, s2 and s3 to g1 Logout Log in as s1 Send some messages to s2 containing the "s" character Send some messages to s3 Send some messages to g1 Send a contact request to s2 Star s2 conversation Log out. Log in as s2 Accept s1 contact request Log out. Log in as s3 Send a Contact request to s1 Testing scenario 1: Overview Log in as s1 CHECK the message icon with id="message-drawer-toggle-xxxxxxxxx " has the role="button" attribute Open the message drawer CHECK the settings button with  data-route="view-settings"  has the role="button" and  aria-label="Settings" attributes CHECK the Contacts link with  data-route="view-contacts" has the role="button" attribute Expand the "Starred" section CHECK the "a" element from the s2 conversation has the role="button" attribute Expand the "Group" section CHECK the "a" element from the g1 conversation has the role="button" attribute Expand the "Private" section CHECK the "a" element from the s3 conversation has the role="button" attribute  Testing scenario 2: Settings and Contacts/requests Log in as s1 Open the message drawer Access to the Settings CHECK the back button has the role="button" attribute Click the back button Access to the Contacts CHECK the search icon has role="button" and  aria-label="Search" attributes CHECK the s2 contact with  data-region="contact"   has the role="button" attribute Access to the Requests CHECK the s3 contact request has the role="button" attribute CHECK the back button has the role="button"  and the aria-label="Back to Messages overview" attributes Testing scenario 3: Search Log in as s1 Open the message drawer Search for "s" CHECK any of the users displayed in the "Non-contacts" has the role="button" attribute in the "a" element CHECK any of the users displayed in the "Contacts" has the role="button" attribute in the "a" element CHECK any of the "Messages" has the role="button" attribute in the "a" element CHECK the back button has the role="button"  and the aria-label="Back to Messages overview" attributes Testing scenario 4: Conversation Log in as s1 Open the message drawer Expand the Group section Access to g1 conversation CHECK the back button has the role="button"  and the aria-label="Back to Messages overview" attributes CHECK the user information with  data-action="view-group-info" has the role="button" attribute in the "a" element CHECK the "x participants" information with data-action="view-group-info" has the role="button" attribute in the "a" element Click over the group name CHECK the back button has the role="button"  and the aria-label="Back to Conversation with g1" attributes CHECK any of the users displayed in the "Other participants" has the role="button" attribute in the "a" element Click the back button Click the back button Expand the "Private" section Access to the s3 conversation CHECK the back button has the role="button"  and the aria-label="Back to Messages overview" attributes CHECK the user information with data-action="view-contact" has the role="button" attribute in the "a" element   Testing scenario 5: Notification preferences Log in as s1 Access to Preferences Open "Notification preferences" page CHECK the "Email" link with a cog and the data-name="email" has the role="button"  attribute
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull from Repository:
    • Pull 3.6 Branch:
    • Pull Master Branch:
      MDL-65087-master

      Description

      Accessibility improvements fixed on this issue:

      • The UI is covered with "links" that perform an action, they don't go anywhere. They should clearly be buttons - even if it is just the role on a tag. For instance, the icon to open the messaging window is marked as a link instead of a button.
      • All the "users" in the search results are read as "internal links" but they do not function like that because they perform some action on the page. They should be buttons.
      • Search and settings "links" do not have any readable text.
      • Star icons have no labels and so they are not read ever.

        Attachments

        1. 4and5.png
          4and5.png
          268 kB
        2. 3.png
          3.png
          162 kB
        3. 2.png
          2.png
          161 kB
        4. 1.png
          1.png
          228 kB

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  13/May/19

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 5 hours, 15 minutes
                  5h 15m