[A11y] - Label does not convey purpose of control

[VaniChinnam]

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
• Serious
• Critical
• Moderate
• Minor

Issue Details

View Issue 1686753

Auditor ID : 1686753

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 : <button type="button" aria-label="Hide Panel" aria-expanded="true" aria-controls="sidebar-9" aria-labelledby="tooltip11">

Screenshots : Show panel

View Issue 1686754

Auditor ID : 1686754

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 : `

...

Optional group heading

`

Screenshots : Group label

[scurker]

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]

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.