Issue Summary

Role and state have not been defined for the interactive elements.

Steps to Reproduce

1. Open "JSM System Dashboard" page.
2. Navigate to the "Projects" in the header section and choose any ITSM project from the options.
3. Navigate to the "Raise a request" link in the side navigation and activate it.
4. Navigate and activate the "Help center" link in the header section.
5. Navigate to the "Customize" button in the header section and activate it.
6. Navigate to the mentioned instances and inspect the code
7. Observe that the role and state have not been defined.

Screen Recording

Screen Recording 2024-12-10 at 10.11.01 AM.mov

Screenshot

Actual Results

The role is not defined for the buttons present in the Customize help center non-modal such as the “Banner background“, "Banner text", "Button background", and "Button text" buttons. Also, the keyboard support for these buttons are missing which makes it inaccessible.

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

Expected Results

The button 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 or role="button" and tabindex="0".

• Provide an "aria-label" to the <button> element to provide an accessible name.

• Provide "aria-expanded" atrribute to the button element to define its state.
• Make sure the value of "aria-expanded" changes to "true" in the expanded state.
• Modify the scripts to ensure the button is operable with a keyboard and a mouse.

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

Code Example:

<button aria-label="Banner background" aria-expanded="false" id="help-center-header-bg-color-picker" class="help-center-header-color-picker sd-color-picker" name="headerBGColor" value="#305d89" resolved="">
  <input type="text" name="headerBGColor" style="display: none;">
  <div class="sp-replacer sp-light text">
    <div class="sp-preview">
      <div class="sp-preview-inner" style="background-color: rgb(48, 93, 137);"></div>
    </div>
    <div class="sp-dd">#305d89</div>
  </div>
</button> 

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 15.1.1
Chrome - Version 131.0.6778.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.6 (19618.3.11.11.5)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest