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

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

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-71669-master
    • 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.
    • 0
    • Internationals - 4.0 Sprint 1, HQ Team International Sprint 2, HQ Team International Sprint 3

       

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

            jpataleta Jun Pataleta
            rezaie9 Shamim Rezaie
            Dongsheng Cai Dongsheng Cai
            Andrew Lyons Andrew Lyons
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                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

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