Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-90567

Calendar | Create Event: Time selector form field inaccessible for users

      Issue Summary

      The Start time" and "End time" time selector form fields are not operable with a keyboard.

      Steps to Reproduce

      1. Navigate to the header and activate the "Calendar" link
      2. Navigate to the dates and activate it 
      3. Using the screen reader, navigate to the "Start time" and "End time" form fields
      4. Observe that the time selector form fields are not reachable

      Screenshot

      Actual Results

      The "Start time" and "End time" form fields used for time selection in the "Create event" modal dialog are not operable with a keyboard. The tabindex="-1" attribute is provided for the mentioned form fields. This made it difficult for keyboard-only and screen reader users to interact with the Date selector widget. Additionally, the time options are not provided in the mentioned form fields

      Expected Results

      Apply the following changes:

      • Remove the tabindex="-1" attribute from the source code of the mentioned form fields.
      • Provide the different time options for the "Start time" and "End time" form fields that will help user to select time from the list.
      • Provide visible time format instructions before the form fields and also include them in the label of the form field.

      Workaround

      Not available 

      Environment 

      MacBook Pro (16-inch, 2019)
      macOS 13.4.1 (c) (22F770820d)
      Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
      Firefox- Version 114.0 (64-bit)
      Safari- Version 16.5.2 (18615.2.9.11.10)
      JAWS- Version 2023.2306.28
      NVDA- Version 2022.2.2
      Voiceover - Version Latest

            [CONFSERVER-90567] Calendar | Create Event: Time selector form field inaccessible for users

            A fix for this issue is available in Confluence Data Center 8.8.0.
            Upgrade now or check out the Release Notes to see what other issues are resolved.

            Aakash Jain added a comment - A fix for this issue is available in Confluence Data Center 8.8.0. Upgrade now or check out the Release Notes to see what other issues are resolved.

            Spent some time researching the problem.

            The best thing to do here would be to replace it with a proper <input type="time"> component - but it will require some refactoring to the existing code (at least one day).

            The code here turns the input into autocomplete for some reason(I can't see any autocomplete functionality): event-field-handlers.js

            And this is what seems to cause the tabindex issue

            Maxim Leizerovich added a comment - Spent some time researching the problem. The best thing to do here would be to replace it with a proper <input type="time"> component - but it will require some refactoring to the existing code (at least one day). The code here turns the input into autocomplete for some reason(I can't see any autocomplete functionality): event-field-handlers.js And this is what seems to cause the tabindex issue

              zxu2@atlassian.com Zac Xu
              b4488184f7d2 Rahil Shaikh
              Affected customers:
              0 This affects my team
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: