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

AXSR-285 | Calendar: Button role not defined and lack keyboard support

XMLWordPrintable

      Issue Summary

      The calendar "event-item" buttons are not defined programmatically as a button.

      Steps to Reproduce

      1. Open the "Confluence DC" home page.
      2. Navigate to the "Calendars" option in the side navigation of your space.
      3. Navigate to the "list" option in the calendar and activate it.
      4. Observe the "event-item" list will appear.
      5. Observe these buttons do not have keyboard support.
      6. Inspect the code and notice that a role is missing for these buttons.

      Screen Recording

      Screen Recording 2024-06-11 at 10.20.29 AM.mov

      Screenshot

      Actual Results

      The role is not defined for the interactive elements such as the "event-item” buttons present in all the code panels of the Calendar in the main content area. Also, the keyboard support is missing for these buttons.

      This made it difficult for keyboard-only users and screen reader users to access the functionality associated with it.

      Expected Results

      Buttons should be focusable and operable with a keyboard and have a programmatically defined button role.

      Ensure that all the interactive elements are focusable and operable using a keyboard and screen reader.
      Apply the following changes:

      • Code the mentioned buttons using <button> tag.
      • Modify the scripts to ensure that the button is operable with a keyboard and a mouse.

      A working example of an accessible button can be found at [The Button element - HTML: HyperText Markup Language | MDN|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button]

      Code Example:

      <button class="event-item" data-event-id="20240610T140141Z--2017082497@pc-conf-dc4.instenv.internal.atlassian.com" data-event-subcalendar-id="ae13d079-804a-4073-a99e-3c30719f2a67" data-sub-calendar-name="Sample">
    (...)
    <div class="event-info-container">
        <strong class="event-name">event 1</strong>
        <span class="event-subcalendar-name">Sample</span>
        <div class="event-description">
    </div>
<button>

      Workaround

      Required, if there is no workaround please state.

      Environment

      MacBook Pro (16-inch, 2021)
      macOs Monterey Version 12.3.1
      Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 15.3 (17612.4.9.1.5)
      JAWS- Version 2022
      NVDA- Version 2020.3
      Voiceover - Version Latest

        1. Screen Recording 2024-06-11 at 10.20.29 AM.mov
          6.64 MB
        2. Screenshot 2024-06-11 at 10.20.06 AM.png
          Screenshot 2024-06-11 at 10.20.06 AM.png
          282 kB

            [CONFSERVER-95957] AXSR-285 | Calendar: Button role not defined and lack keyboard support

            Akshay Kumar added a comment -

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

            Akshay Kumar added a comment - A fix for this issue is available in Confluence Server and Data Center 9.3.1. Upgrade now or check out the Release Notes to see what other issues are resolved.

              zxu2@atlassian.com Zac Xu
              1833d2e1842a Rahul Patil
              Affected customers:
              1 This affects my team
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: