Uploaded image for project: 'stripes-components'
  1. stripes-components
  2. STCOM-315

BUG: Datepicker incorrectly manages focus which results in an accessibility problem



    • Type: Story
    • Status: Closed (View Workflow)
    • Priority: P3
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: 8.0.0
    • Labels:
    • Template:
    • Sprint:
      stripes-force 92, stripes-force 93, stripes-force 94
    • Development Team:
      Stripes Force


      The Datepicker allows a user to enter a date by clicking the input field and tying in the date. The same click action causes the calendar to become visible allowing the user to choose a date from the calendar.

      While the calendar is open, the user can can use keyboard navigation to navigate the day cursor in the calendar. This allows the user select days or navigate to other months or years. Navigating with arrow keys has a side effect of moving the selection cursor in the input field.

      You can see this in the video called Navigating with board in Datepicker.mov

      This can get very confusing especially when the user intends to select a date in the calendar but then decides to change the input. The fact that both the input is focused and the calendar is visible creates a very messy use experience.

      While attempting fix this, I discovered that the incorrect focus is preventing screen readers from notifying the user that the calendar is visible. An example of what the screen readers sees can be found in Screen Reader can not see the Calendar.mov

      Usually, the recommendation for accessibility of date pickers is to make the use of the Calendar optional. The user should be able to choose to use the calendar but they need to be aware that the calendar became visible so they can start navigating the calendar with their keyboard.

      If the intent is to make the Calendar use optional, then it should only open when the user clicks on the calendar button. This is another problem, the Calendar button is not navigable with tab.

        TestRail: Results


            Issue Links



                JohnC John Coburn
                taras Taras Mankovski
                0 Vote for this issue
                3 Start watching this issue



                    TestRail: Runs

                      TestRail: Cases