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

Messaging: improve ARIA labels to message drawer

XMLWordPrintable

    • MOODLE_36_STABLE
    • MOODLE_36_STABLE
    • MDL-64985-master
    • 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, s3 and s4 to C1
      4. Create group g1 and enable group messaging
      5. Add s1, s2, s3 and s4 to g1
      6. Log in as s1
      7. Send some messages to s2
      8. Send some messages to s3
      9. Mute conversation with s4
      10. Send some messages to g1
      11. Star s2 conversation

      Testing scenario 1: Cancel button label

      1. Log in as s1
      2. Open the message drawer
      3. Access to the conversation with s2 from the "Starred" section
      4. Select 1 or 2 messages, clicking over them
      5. Inspect the HTML code for the x next to "Messages selected: z"
      6. CHECK the button with data-action="cancel-edit-mode" has also the aria-label="Cancel message selection" attribute

       

      Testing scenario 2: Action menus labels

      1. Log in as s1
      2. Open the message drawer
      3. Access to the conversation with s2 from the "Starred" section
      4. Click over the actions menu ("...")
      5. CHECK "User info" is displayed instead of just "Info"
      6. CHECK "Unstar conversation" is displayed, instead of just "Unstar"
      7. Click over "Unstar conversation"
      8. CHECK "Star conversation" is displayed, instead of just "Star"
      9. Inspect the HTML code for the "..." button
      10. CHECK the button with id="conversation-actions-menu-button" contains also the aria-label="Conversation actions menu" attribute
      11. Access to the g1 conversation
      12. Click over the actions menu ("...")
      13. CHECK "Group info" is displayed
      14. CHECK "Star conversation" is displayed, instead of just "Star"
      15. Inspect the HTML code for the "..." button
      16. CHECK the button with id="conversation-actions-menu-button" contains also the aria-label="Conversation actions menu" attribute

       

      Testing scenario 3: Link user profile

      1. Log in as s1
      2. Open the message drawer
      3. Access to the conversation with s2
      4. Click over the actions menu ("...")
      5. Select "User info"
      6. Inspect the HTML code for the user profile image
      7. CHECK the img element doesn't contain the  aria-hidden="true" attribute

      Testing scenario 4: Muted conversation label

      ATTENTION: This scenario should be tested only in master (mute/unmute actions are not available in 3.6)

      1. Log in as s1
      2. Open the message drawer
      3. Access to the conversation with s4
      4. Inspect the HTML code for the muted conversation icon next to the s4 name.
      5. CHECK the span with data-action="muted-icon-container" has also the aria-label="Muted conversation" 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, s3 and s4 to C1 Create group g1 and enable group messaging Add s1, s2, s3 and s4 to g1 Log in as s1 Send some messages to s2 Send some messages to s3 Mute conversation with s4 Send some messages to g1 Star s2 conversation Testing scenario 1: Cancel button label Log in as s1 Open the message drawer Access to the conversation with s2 from the "Starred" section Select 1 or 2 messages, clicking over them Inspect the HTML code for the x next to "Messages selected: z" CHECK the button with data-action="cancel-edit-mode" has also the aria-label="Cancel message selection" attribute   Testing scenario 2: Action menus labels Log in as s1 Open the message drawer Access to the conversation with s2 from the "Starred" section Click over the actions menu ("...") CHECK "User info" is displayed instead of just "Info" CHECK "Unstar conversation" is displayed, instead of just "Unstar" Click over "Unstar conversation" CHECK "Star conversation" is displayed, instead of just "Star" Inspect the HTML code for the "..." button CHECK the button with id="conversation-actions-menu-button" contains also the  aria-label="Conversation actions menu" attribute Access to the g1 conversation Click over the actions menu ("...") CHECK "Group info" is displayed CHECK "Star conversation" is displayed, instead of just "Star" Inspect the HTML code for the "..." button CHECK the button with id="conversation-actions-menu-button" contains also the  aria-label="Conversation actions menu" attribute   Testing scenario 3: Link user profile Log in as s1 Open the message drawer Access to the conversation with s2 Click over the actions menu ("...") Select "User info" Inspect the HTML code for the user profile image CHECK the img element doesn't contain the   aria-hidden="true" attribute Testing scenario 4: Muted conversation label ATTENTION: This scenario should be tested only in master (mute/unmute actions are not available in 3.6) Log in as s1 Open the message drawer Access to the conversation with s4 Inspect the HTML code for the muted conversation icon next to the s4 name. CHECK the span with data-action="muted-icon-container" has also the aria-label="Muted conversation" attribute

      • Cancel buttons are completely unlabelled and not usable. Add aria labels for cancel edit message button (the little cross when selecting messages).
      • Add better aria labels to the menus in messaging (simply saying "Info" doesn't give the user any context).
      • Link to a user profile has no label or text explaining what it does.

        1. 1.png
          1.png
          310 kB
        2. 2.png
          2.png
          189 kB
        3. image-2019-04-25-10-31-20-889.png
          image-2019-04-25-10-31-20-889.png
          107 kB

            sarjona Sara Arjona (@sarjona)
            sarjona Sara Arjona (@sarjona)
            Carlos Escobedo Carlos Escobedo
            David Monllaó David Monllaó
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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