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

Menus opened by Atto buttons are announced as dialog box by screen-readers

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      Prerequisite
      1. Axe DevTools (Chrome webstore / Firefox Browser Add-ons)
      Test: Paragraph styles
      1. Log in as a user
      2. Edit your profile
      3. Using your browser's dev tools, inspect the "Paragraph styles" menu button.
      4. Check the Paragraph styles menu button in the Accessibility tree (e.g. in Chrome the Accessibility section is under the "Elements" tab. In Firefox there's the accessibility tab, or it would be simpler to right-click on the button and select "Inspect Accessibility Properties".
      5. Confirm that the "Paragraph styles" menu button is identified as a menu button (In Firefox, it will be identified as a "buttonmenu", while in Chrome it will be identified as "combobox")
      6. Activate the Paragraph styles menu button to display its menu items.
      7. Inspect the menu popup in the accessibility tree. Click the <ul> tag enclosing the menu items (<li> tags)
      8. Confirm that the menu items are now under the "Paragraph styles" menu and that they are not under a dialog. (If you compare with a Moodle instance without a patch, you'll see the menu items are under a dialog)
      Automated accessibility testing
      1. With the Paragraph styles menu opened, click the "axe DevTools" tab in your browser's dev tools.
      2. Press "Scann all of my page"
      3. Confirm that you don't see the following errors:
        • "Certain ARIA roles must be contained by particular parents" errors
        • "<ul> and <ol> must only directly contain <li>, <script> or <template> elements"
      Test: Atto table
      1. Expand the atto toolbar
      2. Click on the "Table" button.
      3. Create a table.
      4. In the editor interface make sure the cursor is in the table. The Table button should be highlighted.
      5. Inspect the Table button's accessibility properties.
      6. Confirm that the Table button is identified as a menu button. (Chrome will see it as a "combobox", while Firefox will see it as a "buttonmenu")
      7. Click on the Table button and confirm that the table's menu options are being shown.
      8. On the editor, move the cursor outside the table so the highlight on Table button gets removed.
      9. Again, inspect the Table button's accessibility properties.
      10. Confirm that this time, it is simply identified as a button (or pushbutton in Firefox).
      11. Click on the Table button and confirm that the "Create table" dialog comes out.
      Show
      Prerequisite Axe DevTools ( Chrome webstore / Firefox Browser Add-ons ) Test: Paragraph styles Log in as a user Edit your profile Using your browser's dev tools, inspect the " Paragraph styles " menu button. Check the Paragraph styles menu button in the Accessibility tree (e.g. in Chrome the Accessibility section is under the "Elements" tab. In Firefox there's the accessibility tab, or it would be simpler to right-click on the button and select "Inspect Accessibility Properties". Confirm that the "Paragraph styles" menu button is identified as a menu button (In Firefox, it will be identified as a " buttonmenu ", while in Chrome it will be identified as " combobox ") Activate the Paragraph styles menu button to display its menu items. Inspect the menu popup in the accessibility tree. Click the <ul> tag enclosing the menu items (<li> tags) Confirm that the menu items are now under the "Paragraph styles" menu and that they are not under a dialog. (If you compare with a Moodle instance without a patch, you'll see the menu items are under a dialog) Automated accessibility testing With the Paragraph styles menu opened, click the " axe DevTools " tab in your browser's dev tools. Press "Scann all of my page" Confirm that you don't see the following errors: " Certain ARIA roles must be contained by particular parents " errors " <ul> and <ol> must only directly contain <li>, <script> or <template> elements " Test: Atto table Expand the atto toolbar Click on the " Table " button. Create a table. In the editor interface make sure the cursor is in the table. The Table button should be highlighted. Inspect the Table button's accessibility properties. Confirm that the Table button is identified as a menu button. (Chrome will see it as a " combobox ", while Firefox will see it as a " buttonmenu ") Click on the Table button and confirm that the table's menu options are being shown. On the editor, move the cursor outside the table so the highlight on Table button gets removed. Again, inspect the Table button's accessibility properties. Confirm that this time, it is simply identified as a button (or pushbutton in Firefox). Click on the Table button and confirm that the " Create table " dialog comes out.
    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE, MOODLE_311_STABLE
    • Pull 3.10 Branch:
      MDL-71669-310
    • Pull 3.11 Branch:
      MDL-71669-311
    • Pull Master Branch:
      MDL-71669-master
    • Story Points:
      0
    • Sprint:
      Internationals - 4.0 Sprint 1, HQ Team International Sprint 2, HQ Team International Sprint 3

      Description

       

      • Replication with NVDA: Use the Tab key until the focus is on the Atto editor. Then navigate through the buttons with Right Arrow. Once you are on the "Paragraph Style" button, press the Enter key to open the button menu. This "menu" is announced as a dialog box by NVDA. An inspection of the HTML code reveals that the <div> tag enclosing the "menu" has been assigned the role="dialog" attribute.
      • Recommendation Summary: The component was designed as a button opening a drop-down menu, not a dialog box. Therefore, the role "dialog" is inappropriate and should be removed, as it is confusing for screen reader users. The presence of the submenu should be indicated by giving the button the aria-haspopup attribute, and the collapsed or expanded state of the button should be indicated with the aria-expanded attribute.

      The principle of the recommendation is that if we keep the "dialog" role, this component should behave like a true modal dialog, with a properly labelled close button, and an inability to interact with background content. This is obviously not what the developers want.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              jpataleta Jun Pataleta
              Reporter:
              rezaie9 Shamim Rezaie
              Peer reviewer:
              Dongsheng Cai Dongsheng Cai
              Integrator:
              Andrew Lyons Andrew Lyons
              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:
              6 Start watching this issue

                Dates

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

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 3 days, 2 hours, 15 minutes
                  3d 2h 15m