Details

    • Type: Sub-task
    • Status: OPEN
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 20.0, 21.0 [Tentative]
    • Fix Version/s: None
    • Component/s: Accessibility
    • Environment:
      Windows, Chrome
    • Test Plan:
      Hide

      With a screen reader on: 

      1. Navigate to the Overview Tool.
      2. Navigate to the Calendar Widget, Choose the Option button.
      3. Use the tab key to navigate through the form.
      4. When you tab to the View menu, you should hear "Options, Calendar display, View: combo box Calendar by Month." You should also be able to use the arrow keys to change the selected option, hearing all the options read.
      5. When you tab to the Event Types High Priority select box, you should hear something like: "Priority Events, Event Types, High priority: extended select list box: Deadline." You should also be able to use the arrow keys to change the selected option, hearing all the options read.
      6. The next tab element should be the Move Down button (Move Up should be disabled and grayed out while an item from the High Priority box is selected because you can't move anything higher than High Priority. You should, when tabbing to the Move Down button, hear something like: "Lower priority of [selected item]", e.g., "Lower priority of Deadline". When you select the Move Down button, the item is moved into Medium Priority box and announced that the selected action completed.
      7. Tab again to enter the Medium Priority select box, you should hear something like: "Priority Events, Event Types, Medium priority: extended select list box: Meeting." You should be able to use the arrow keys to change the selected option, hearing all the options read. After selecting an item in this box, with Shift + Tab, you should navigate back to Move Up button, with Move Down disabled and grayed out, and hear something like "Increase priority of [selected item]".
      8. If you have selected an item in the Medium Priority box, and you Tab to the next element, it should take you to the Move Down button underneath the box (with that corresponding Move Up button disabled) and tell you that you can lower the priority (and similar behavior for the Low Priority box below).
      9. Use the tab key to navigate to the High Priority text field under the Colors heading.
        1. Issue: Screen reader announces: "Main region, Calendar frame, High Priority colon, type and text."
        2. If issue fixed: Screen reader should announce: "Main region, Calendar frame, Color, High Priority colon Enter hex code. type and text."
      10. Same behavior should obtain for Medium Priority and Low Priority Text fields under Color heading.
      Show
      With a screen reader on:  Navigate to the Overview Tool. Navigate to the Calendar Widget, Choose the Option button. Use the tab key to navigate through the form. When you tab to the View menu, you should hear "Options, Calendar display, View: combo box Calendar by Month." You should also be able to use the arrow keys to change the selected option, hearing all the options read. When you tab to the Event Types High Priority select box, you should hear something like: "Priority Events, Event Types, High priority: extended select list box: Deadline." You should also be able to use the arrow keys to change the selected option, hearing all the options read. The next tab element should be the Move Down button ( Move Up should be disabled and grayed out while an item from the High Priority box is selected because you can't move anything higher than High Priority. You should, when tabbing to the Move Down button, hear something like: "Lower priority of [selected item] ", e.g., "Lower priority of Deadline". When you select the Move Down button, the item is moved into Medium Priority box and announced that the selected action completed. Tab again to enter the Medium Priority select box, you should hear something like: "Priority Events, Event Types, Medium priority: extended select list box: Meeting." You should be able to use the arrow keys to change the selected option, hearing all the options read. After selecting an item in this box, with Shift + Tab, you should navigate back to Move Up button, with Move Down disabled and grayed out, and hear something like "Increase priority of [selected item] ". If you have selected an item in the Medium Priority box, and you Tab to the next element, it should take you to the Move Down button underneath the box (with that corresponding Move Up button disabled) and tell you that you can lower the priority (and similar behavior for the Low Priority box below). Use the tab key to navigate to the High Priority text field under the Colors heading. Issue: Screen reader announces: "Main region, Calendar frame, High Priority colon, type and text." If issue fixed: Screen reader should announce: "Main region, Calendar frame, Color, High Priority colon Enter hex code. type and text." Same behavior should obtain for Medium Priority and Low Priority Text fields under Color heading.

      Description

      Issue: In the synoptic Calendar widget, the controls of the Options form under the heading Priority Events are not properly grouped together using <fieldset> elements. Consequently, when a screen reader user tries to interact with the form, the combination of the accessible name and accessible description and other programmatic associations (i.e., headings that should identify the form controls associated with them) do not describe the input field including all relevant instructions and cues.

      Additionally, the Move up and Move down button behavior is confusing because you can click them when they either should not be available (and consequently they have no effect) and it's not clear where you are moving the items to.

      Other details of the bad behavior: Under the Colors section, the text boxes for choosing colors have form labels of High Priority, Medium Priority, and Low Priority.  When a screen reader user navigates this page, they must use the tab key to jump from form field to form field. Because the section label "Colors"  is outside a form control, this visual text label will be skipped causing the Text box form labels to be confusing. Screen reader users do not know they are supposed to type in a HEX code into the text box, because label is missing relevant cues. Also, the section above contains other form fields with same form labels (High, Medium and Low Priority).

      Proposed fixes:

      Desired behavior: When assistive technology user navigates into the form field for High Priority, it should read "Color, High Priority, Enter hex code." Other elements of the same group, e.g., Medium Priority, should behave similarly, i.e., "Color, Medium Priority, Enter hex code." It should be clear what can be moved up or down and where the item will go.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  Assignee:
                  maintenanceteam Core Team
                  Reporter:
                  jbbeth1 Jen Bethmann
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                    Dates

                    Created:
                    Updated:

                      Git Integration