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

Title of some dialogs are not read by screen reader when they are opened

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_310_STABLE, MOODLE_311_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE, MOODLE_311_STABLE
    • Pull from Repository:
    • Pull 3.10 Branch:
      MDL-71672-310-2
    • Pull 3.11 Branch:
      MDL-71672-311-2
    • Pull Master Branch:
      MDL-71672-master-2
    • Testing Instructions:
      Hide

      Prerequisites:

      1. Test with both NVDA (Windows) and VoiceOver (macOS).
      2. You need the WAVE browser extension
      3. Your website URL has to be https

      Test 1 (to be tested with both NVDA and VoiceOver)

      1. Log in as admin
      2. Go to your edit profile page
      3. From the Atto editor in the 'Description field' click on the first Atto button to expand the Atto toolbar
      4. From the Atto editor in the 'Description' field, click on the 'insert character' button
        1. Verify that the screen reader reads the content of the dialog
        2. Verify that the first button is focused
      5. Close the 'insert character' dialog
      6. From the Atto editor in the 'Description' field, click on the 'Accessibility checker' button
        1. Verify that the screen reader reads the content of the dialog
        2. Verify that the close button is focused
      7. close the accessibility checker dialog
      8. From the Atto editor in the 'Description' field, click on the 'Screenreader helper' button
        1. Verify that the screen reader reads the content of the dialog
        2. Verify that the close button is focused
      9. From the Atto editor in the description field, click on the 'record audio' button
      10. Close the record audio dialog
        1. Verify that the focus is moved back to the 'record audio' button in the Atto toolbar
      11. From the Atto editor in the description field, click on the 'record video' button
      12. Close the record video dialog
        1. Verify that the focus is moved back to the 'record video' button in the Atto toolbar
      13. From the Atto editor in the description field, click on the 'emoji picker' button
        1. Verify that when the emojis are loaded, the focus is put on the 'search' text box
      14. From the Atto editor in the description field, click on the 'manage files' button
        1. Verify that when the file manager component is loaded, the focus is put on the 'Add...' button

      Test 2

      1. Log in as admin
      2. Go to your edit profile page
      3. From the Atto editor in the 'Description' field, click on the 'insert or edit image' button
      4. Press the WAVE extension's button
      5. Verify that there is no "Broken ARIA reference" error on the page (ignore the errors that are for non-visible elements)
      6. Go to "Site administration > Language > Language packs"
      7. Install an additional language if you only have English
      8. Select a language other than English from the "list of installed language packs" and click on the "Uninstall selected language pack(s)" button
      9. Verify that a confirmation dialog is opened
      10. Leave the dialog open and press on the WAVE extension's button
      11. Verify that there is no "Broken ARIA reference" error on the page
      12. Refresh the page
      13. Select "English" from the "list of installed language packs" and click on the "Uninstall selected language pack(s)" button
      14. Verify that a dialog is opened
      15. Leave the dialog open and press on the WAVE extension's button
      16. Verify that there is no "Broken ARIA reference" error on the page
      17. Refresh the page
      18. Open your browser's developer tools window and go to the console tab
      19. Execute the following command in console
        • Y.use('moodle-core-notification-exception', function() {
          new M.core.exception({name: 'Title', message:'Message'});
          });
      20. Verify that a dialog is opened
      21. Leave the dialog open and press on the WAVE extension's button
      22. Verify that there is no "Broken ARIA reference" error on the page
      23. Refresh the page
      24. Execute the following command in console
        • Y.use('moodle-core-notification-ajaxexception', function() {
          new M.core.ajaxException({name: 'Title', error:'Error'});
          });
      25. Verify that a dialog is opened
      26. Leave the dialog open and press on the WAVE extension's button
      27. Verify that there is no "Broken ARIA reference" error on the page

       

      Show
      Prerequisites: Test with both NVDA (Windows) and VoiceOver (macOS). You need the WAVE browser extension Your website URL has to be https Test 1 (to be tested with both NVDA and VoiceOver) Log in as admin Go to your edit profile page From the Atto editor in the 'Description field' click on the first Atto button to expand the Atto toolbar From the Atto editor in the 'Description' field, click on the 'insert character' button Verify that the screen reader reads the content of the dialog Verify that the first button is focused Close the 'insert character' dialog From the Atto editor in the 'Description' field, click on the 'Accessibility checker' button Verify that the screen reader reads the content of the dialog Verify that the close button is focused close the accessibility checker dialog From the Atto editor in the 'Description' field, click on the 'Screenreader helper' button Verify that the screen reader reads the content of the dialog Verify that the close button is focused From the Atto editor in the description field, click on the 'record audio' button Close the record audio dialog Verify that the focus is moved back to the 'record audio' button in the Atto toolbar From the Atto editor in the description field, click on the 'record video' button Close the record video dialog Verify that the focus is moved back to the 'record video' button in the Atto toolbar From the Atto editor in the description field, click on the 'emoji picker' button Verify that when the emojis are loaded, the focus is put on the 'search' text box From the Atto editor in the description field, click on the 'manage files' button Verify that when the file manager component is loaded, the focus is put on the 'Add...' button Test 2 Log in as admin Go to your edit profile page From the Atto editor in the 'Description' field, click on the 'insert or edit image' button Press the WAVE extension's button Verify that there is no "Broken ARIA reference" error on the page (ignore the errors that are for non-visible elements) Go to "Site administration > Language > Language packs" Install an additional language if you only have English Select a language other than English from the "list of installed language packs" and click on the "Uninstall selected language pack(s)" button Verify that a confirmation dialog is opened Leave the dialog open and press on the WAVE extension's button Verify that there is no "Broken ARIA reference" error on the page Refresh the page Select "English" from the "list of installed language packs" and click on the "Uninstall selected language pack(s)" button Verify that a dialog is opened Leave the dialog open and press on the WAVE extension's button Verify that there is no "Broken ARIA reference" error on the page Refresh the page Open your browser's developer tools window and go to the console tab Execute the following command in console Y.use('moodle-core-notification-exception', function() { new M.core.exception({name: 'Title', message:'Message'}); }); Verify that a dialog is opened Leave the dialog open and press on the WAVE extension's button Verify that there is no "Broken ARIA reference" error on the page Refresh the page Execute the following command in console Y.use('moodle-core-notification-ajaxexception', function() { new M.core.ajaxException({name: 'Title', error:'Error'}); }); Verify that a dialog is opened Leave the dialog open and press on the WAVE extension's button Verify that there is no "Broken ARIA reference" error on the page  
    • Story Points:
      0
    • Sprint:
      Internationals - 4.0 Sprint 1, HQ Team International Sprint 2, HQ Team International Sprint 3, HQ Team International Sprint 4, HQ Team International Sprint 5

      Description

      This is the case when "Emoticon", "insert character", "Accessibility checker" or "Screenreader helper" buttons is pressed.

      NVDA only says "section"

       

      • Replication Example 1 - "Insert Character": After starting NVDA, click on this button. Normally you would select the button with the keyboard, but this is not working. When the dialog opens, NVDA says: "Insert character close section". I press Down Arrow a few times, but NVDA doesn't say anything, and the close button is not available. I press Up Arrow once and we hear the title of the page: "Test number 2 - with sections (page 2 of 2)". I press the Up Arrow three more times. NVDA then changes the interaction mode and the focus is placed on the button of the last symbol in the list. You then have to scroll through the buttons from the bottom to the top, with Arrow Up.

      I could also have worked around the issue by using the tab key when opening the dialog to force the focus on the close button. However, this is counterintuitive.

      • Replication example 2 - "Screen reader help": After starting NVDA, click on this button. When the dialog opens, NVDA says: "Screen reader help close section". If you press the Down Arrow button a few times, a blinking cursor moves in the dialog. However, the close button is not available and NVDA does not say anything. When I reach the end of the dialog, I move up with Up Arrow until the blinking cursor reaches the title of the dialog "Screen reader help". I press the Up Arrow again and I hear the title of the page: "Test number 2 - with sections (page 2 of 2)". I press the Up Arrow three more times. NVDA then changes the interaction mode and the focus is placed on the close button. Only then is it possible to read the contents of the dialog correctly and access the close button.

      I could also have worked around the issue by using the tab key when opening the dialog to force the focus on the close button. However, this is counter intuitive.

       

        Attachments

        1. image-2021-06-07-15-51-49-992.png
          image-2021-06-07-15-51-49-992.png
          566 kB
        2. MDL-71672.jpg
          MDL-71672.jpg
          51 kB
        3. MDL-71672(2).jpg
          MDL-71672(2).jpg
          53 kB
        4. Test1_Step4.1.mp4
          538 kB
        5. Test1_Step6.1.mp4
          375 kB
        6. Test1_Step8.1.mp4
          217 kB

          Issue Links

            Activity

              People

              Assignee:
              rezaie9 Shamim Rezaie
              Reporter:
              rezaie9 Shamim Rezaie
              Peer reviewer:
              Jun Pataleta Jun Pataleta
              Integrator:
              Ilya Tregubov Ilya Tregubov
              Tester:
              Anna Carissa Sadia Anna Carissa Sadia
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                29/Jul/21

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 3 hours
                  1w 3h