Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-41259 Date picker / calendar widget: accessibility: Bug fixes needed for multiple accessibility issues with Date picker calendar widget
  3. SAK-42022

All Sakai date fields (e.g., Open/Due date) should indicate the required format for text entry, and include error reporting.

    XMLWordPrintable

    Details

    • Type: Sub-task
    • Status: OPEN
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 11.4, 11.5 [Tentative], 12.0, 12.1, 12.2, 12.3, 12.4, 12.5, 12.6, 12.7, 19.0, 19.1, 19.2, 20.0, 21.0 [Tentative]
    • Fix Version/s: None
    • Labels:
      None
    • Test Plan:
      Hide

      Testing Notes:

      • This should also be tested for keyboard and screen reader accessibility.
      • Many of the steps below are condensed because they include a similar process in all affected tools.
      1. Create a site with every tool where you are capable of setting a date anywhere, including the following (Please add any I'm missing!):
        • Announcements
        • Assignments
        • Calendar
        • Chat
        • Forums
        • Gradebook
        • Lessons
        • Polls
        • Resources
        • Samigo (Tests & Quizzes)
        • Sign-up
        • Syllabus
      2. In Announcements, create an announcement and Specify Dates.
      3. Make sure the date fields tell you in which format to enter the dates.
      4. Enter a date in the wrong format and make sure you are properly informed of the fact that you entered the wrong date, with instructions to follow the required format.
      5. Enter dates in the correct format and confirm it saves successfully.
      6. Edit the announcement and confirm ability to successfully change dates, with proper notification of incorrect formatting, on the edit screen.
      7. In Assignments, create an assignment.
      8. Repeat testing steps to confirm that you are made aware of the required date format and are notified when trying to enter dates in the wrong format.
      9. Edit an assignment you created and confirm that the date fields provide proper indication of necessary format there.
      10. In Calendar, add an event.
      11. Confirm that you can set the date with the correct format indicated and error reporting for an incorrectly-formatted date.
      12. Edit the calendar event and confirm that the date format is properly indicated and you're notified of errors when attempting to enter incorrectly-formatted dates.
      13. In Chat, create a chat room.
      14. Select Options, then Edit for the chat room.
      15. Confirm that Start and End date formats are properly indicated and you're notified of errors when attempting to enter incorrectly-formatted dates.
      16. In Forums, create a forum and topic, attempting to set availability dates in each, and making sure that the format for dates is properly indicated.
      17. Edit Forum Settings and Topic Settings and make sure the date format is properly indicated on both editing screens and you're notified of errors when attempting to enter incorrectly-formatted dates.
      18. In Gradebook, add a gradebook item and confirm that the Due date field indicates date format properly, with appropriate error reporting.
      19. Edit Details on the gradebook item and confirm that the date format is indicated properly in the editing screen.
      20. In Lessons, edit Settings on the page and confirm the release date field correctly indicates format and you're notified of errors when attempting to enter incorrectly-formatted dates.
      21. Add Content and Add Subpage.
      22. Edit Settings on the subpage and confirm the release date field correctly indicates format and you're notified of errors when attempting to enter incorrectly-formatted dates.
      23. In Polls, add a poll and confirm the Opening and Closing date fields properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates.
      24. Edit the poll and similarly make sure the dates are properly indicated on editing screen.
      25. In Resources, select Actions, then Create folders.
      26. Enter a name for the folder, then select Add Details for this item.
      27. Confirm that From and Until date fields for showing the folder properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates.
      28. Select Add folder(s) now.
      29. In Tests & Quizzes, create a quiz with at least one question.
      30. Go to Settings for the quiz, and make sure that all of the following date fields properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates:
        • Available date
        • Due date
        • Late submission date (if late submissions accepted)
        • All similar date fields available for date/time exceptions.
        • Feedback date (when it is specified to release feedback on specific date)
      31. Publish the quiz.
      32. (These next steps are important because in Tests & Quizzes, there is duplicated code, and changes made in draft copies may be forgotten in the published copy.) In the published version, make sure that all of the following date fields properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates:
        • Available date
        • Due date
        • Late submission date (if late submissions accepted)
        • All similar date fields available for date/time exceptions.
        • Feedback date (when it is specified to release feedback on specific date)
      33. In Sign-up, create an event.
      34. Make sure that all date fields, including on the Advanced user-defined time slots page, properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates.
      35. In Syllabus, make sure you can add items and edit dates with proper indication of date formats and error reporting.
      36. Change the language of your site (e.g., from English to Spanish or French) such that the date format will be different (dd/mm/yyyy instead of mm/dd/yyyy).
      37. Make sure that all tools' date fields behave appropriately and the format indicated is correct.
      38. Change site language back to Default, and edit your Home site's Preferences.
      39. Go to the Language tab and change the language to one that would use a different date format from the server default.
      40. Make sure all tools' date fields behave appropriately and format indicated is correct.
      Show
      Testing Notes: This should also be tested for keyboard and screen reader accessibility. Many of the steps below are condensed because they include a similar process in all affected tools. Create a site with every tool where you are capable of setting a date anywhere, including the following (Please add any I'm missing!): Announcements Assignments Calendar Chat Forums Gradebook Lessons Polls Resources Samigo (Tests & Quizzes) Sign-up Syllabus In Announcements , create an announcement and Specify Dates . Make sure the date fields tell you in which format to enter the dates. Enter a date in the wrong format and make sure you are properly informed of the fact that you entered the wrong date, with instructions to follow the required format. Enter dates in the correct format and confirm it saves successfully. Edit the announcement and confirm ability to successfully change dates, with proper notification of incorrect formatting, on the edit screen. In Assignments , create an assignment. Repeat testing steps to confirm that you are made aware of the required date format and are notified when trying to enter dates in the wrong format. Edit an assignment you created and confirm that the date fields provide proper indication of necessary format there. In Calendar , add an event. Confirm that you can set the date with the correct format indicated and error reporting for an incorrectly-formatted date. Edit the calendar event and confirm that the date format is properly indicated and you're notified of errors when attempting to enter incorrectly-formatted dates. In Chat , create a chat room. Select Options , then Edit for the chat room. Confirm that Start and End date formats are properly indicated and you're notified of errors when attempting to enter incorrectly-formatted dates. In Forums , create a forum and topic, attempting to set availability dates in each, and making sure that the format for dates is properly indicated. Edit Forum Settings and Topic Settings and make sure the date format is properly indicated on both editing screens and you're notified of errors when attempting to enter incorrectly-formatted dates. In Gradebook , add a gradebook item and confirm that the Due date field indicates date format properly, with appropriate error reporting. Edit Details on the gradebook item and confirm that the date format is indicated properly in the editing screen. In Lessons , edit Settings on the page and confirm the release date field correctly indicates format and you're notified of errors when attempting to enter incorrectly-formatted dates. Add Content and Add Subpage . Edit Settings on the subpage and confirm the release date field correctly indicates format and you're notified of errors when attempting to enter incorrectly-formatted dates. In Polls , add a poll and confirm the Opening and Closing date fields properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates. Edit the poll and similarly make sure the dates are properly indicated on editing screen. In Resources , select Actions , then Create folders . Enter a name for the folder, then select Add Details for this item . Confirm that From and Until date fields for showing the folder properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates. Select Add folder(s) now . In Tests & Quizzes , create a quiz with at least one question. Go to Settings for the quiz, and make sure that all of the following date fields properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates: Available date Due date Late submission date (if late submissions accepted) All similar date fields available for date/time exceptions. Feedback date (when it is specified to release feedback on specific date) Publish the quiz. (These next steps are important because in Tests & Quizzes , there is duplicated code, and changes made in draft copies may be forgotten in the published copy.) In the published version , make sure that all of the following date fields properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates: Available date Due date Late submission date (if late submissions accepted) All similar date fields available for date/time exceptions. Feedback date (when it is specified to release feedback on specific date) In Sign-up , create an event. Make sure that all date fields, including on the Advanced user-defined time slots page, properly indicate formats and you're notified of errors when attempting to enter incorrectly-formatted dates. In Syllabus , make sure you can add items and edit dates with proper indication of date formats and error reporting. Change the language of your site (e.g., from English to Spanish or French) such that the date format will be different (dd/mm/yyyy instead of mm/dd/yyyy). Make sure that all tools' date fields behave appropriately and the format indicated is correct. Change site language back to Default , and edit your Home site's Preferences . Go to the Language tab and change the language to one that would use a different date format from the server default. Make sure all tools' date fields behave appropriately and format indicated is correct.

      Description

      This jira impacts multiple tools throughout Sakai that use dates, and will probably need subtasks to address each.

      Date fields in Sakai do not state the format required for someone to type in the date. This is a problem for keyboard and screen reader users, who cannot interact with the calendar widget and may not know what format is needed.

      There is also no error reporting for these users as to the correct format, when incorrectly-formatted text is entered. In some cases (e.g., SAK-41960), the date field fills with NaN null values, and in others (e.g., SAK-41962), the date field simply ignores the user's attempt to change the date.

      Date field labels should either state the required format, or include a visible instruction associated with the form controls, e.g.:

      Open Date (DD/MM/YYYY HH:MM am)

      The following WCAG tutorial explains how to associate form instructions with controls using aria-labelledby and aria-describedby, when the instructions are not part of the label text: Form Instructions.

      Recommended fixes:

      1. Make form field labels for dates include an example of the proper date format, or associate an appropriate visible description with the form field.
      2. When a user enters incorrectly-formatted date text, do not submit the form with a different date than the one they attempted to enter. Instead, provide an error message informing them of the correct format so they can enter the date they need.

      The fixes above will also require internationalization work so that when dates are in a different format based on user preferences or site language settings, the appropriate format is indicated for the date field.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  • Assignee:
                    maintenanceteam Core Team
                    Reporter:
                    rainribbon Tiffany Stull
                  • Votes:
                    0 Vote for this issue
                    Watchers:
                    2 Start watching this issue

                    Dates

                    • Created:
                      Updated:

                      Git Integration