Issue Summary

The CSS background image conveys information and is missing text alternative for assistive technology users.
Element Name: icons next to the following texts.
Another filter, Filter test, Test, and test elements.
Location of the element: Located below the "Quick filters" heading.

As of now, these elements are working like drag and drop controls.

Wrap this icon with the text next to it and make one focusable item.

Steps to Reproduce

1. Open the home page
2. Navigate to the "Administration" button present in the header and activate it.
3. Navigate to the "Plan" link and activate it.
4. Navigate to the "Quick Filter" link and activate it.
5. Navigate to the mentioned instance and inspect the code
6. Observe that the mentioned instance is defined through CSS.

Actual Results

The "Drag" interactive element present in the data table are defined through CSS.
As a result, these images are not available for users browsing the website with the Windows High Contrast setting turned on.
Additionally, the textual description is not provided for the mentioned images. As a result, screen reader users will not understand the purpose of the images.

Expected Results

• All informative images must be implemented with the HTML <img> element rather than as CSS background images inside the <button> element. If the above solution is not feasible, ensure the text describing the purpose of the images is included in the HTML mark-up and the text becomes visible when the high-contrast option is enabled.
• Make sure the drag-and-drop image icon is provided with an appropriate accessible name such as “Drag” using the alt="" attribute.

• Make sure to keep the labels unique by making sure the interactive elements are also conveyed using aria-labelledby="" attribute. E.g.: Such as “Drag twrobel”.

Screenshot

Workaround

Not Available

Bug Ref: 460772