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

Messaging: improve ARIA labels to 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, 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
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Epic Link:
    • Pull from Repository:
    • Pull Master Branch:
      MDL-64985-master
    • Pull Master Diff URL:

      Description

      • 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.

        Attachments

        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

          Issue Links

          blocks

          Improvement - An enhancement to an existing Moodle feature. MOBILE-2963 Apply UI changes in messaging for 3.7

          • Minor - Minor loss of function where workaround is possible
          • Closed
          has been marked as being related by

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-65087 Messaging: add role button to the links in the message drawer

          • Minor - Minor loss of function where workaround is possible
          • Closed
          Testing discovered

          Bug - A problem which impairs or prevents Moodle from functioning correctly. MDL-65418 Message drawer doesn't open in IE11

          • Minor - Minor loss of function where workaround is possible
          • Closed
          will help resolve

          Epic - Created by Jira Software - do not edit or delete. Issue type for a big user story that needs to be broken down. MDL-64582 Messaging user interface accessibility.

          • Minor - Minor loss of function where workaround is possible
          • Open

            Activity

              People

              Assignee:
              sarjona Sara Arjona (@sarjona)
              Reporter:
              sarjona Sara Arjona (@sarjona)
              Peer reviewer:
              Carlos Escobedo
              Integrator:
              David Monllaó
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón
              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 - 2 hours, 50 minutes
                  2h 50m