[A11y] - Programmatic label does not convey purpose of control

[VaniChinnam]

Current Behaviour

The programmatic label does not convey the purpose of the control. The programmatic label and visual label do not convey consistent information.

---

Expected Behaviour

RULE : Labels MUST be meaningful. HOW TO FIX: Fix this issue by ensuring that the programmatic label for the control correctly conveys the purpose of the control. Generally, the programmatic label and the visual label should match.

---

Impact

• Blocker
• Serious
• Critical
• Moderate
• Minor

Issue Details

View Issue 1685584

Auditor ID : 1685584

description : Label Value button
Element location: Below the "Example" heading

Accessible label: Label Value
Visible label: Edit label value

Page Name : TagButton

source : <button type="button" class="TagButton Tag Button--tag"><div class="Tag__label">Label</div>value<span aria-hidden="true" class="Icon Icon--pencil TagButton__icon"><svg overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" height="24" width="24"></svg></span></button>

Screenshots : Programmatic label does not convey purpose of control