[A11y] - Label does not convey purpose of control

VaniChinnam commented 6 months ago

Current Behaviour

The label does not convey the purpose of the control.

Expected Behaviour

RULE : Labels MUST be meaningful. HOW TO FIX: Fix this issue by providing a descriptive label for the control.

Impact

- [ ] Blocker - [x] Serious - [ ] Critical - [ ] Moderate - [ ] Minor ### Issue Details

View Issue 1686753

_**Auditor ID**_ : [1686753](https://axeauditor.dequecloud.com/issue-global-search?searchKeyword=1686753&searchOn=id) _**description**_ : Show/ Hide Panel Element location: In the "Default, With Optional Group Headings" sections. Expected name: Show Items panel/ Hide items panel Show Grouped Items panel/ Hide Grouped Items panel _**Page Name**_ : Two column panel _**source**_ : `

View Issue 1686754

_**Auditor ID**_ : [1686754](https://axeauditor.dequecloud.com/issue-global-search?searchKeyword=1686754&searchOn=id) _**description**_ : Grouped items region label is given as "OPTIONAL GROUP HEADING" instead of "Grouped Items". Element location: In the section "With Optional Group Headings". _**Page Name**_ : Two column panel _**source**_ : `

scurker commented 6 months ago

For the first example, we're showing 2 examples of of the same component with its default label that we shouldn't directly change because they're specifically examples that would ideally be isolated. In real practice, there would not be 2 of these components on the same page so they're a bit out of context here but these labels should not change for the purpose of documentation.

For the 2nd issue, that can be quickly fixed in documentation.

scurker commented 5 months ago

After discussing with @VaniChinnam and subject matter experts the path forward is to add an aria-described to the toggle button so that we can meet in the middle.

dequelabs / cauldron