Fix critical accessibility issues

[thrbnhrtmnn]

Description / User Story

After #187 this is the task to fix the most critical accessibility issues. Preparing this task is part of #187 .

TIMEBOX: 1 iteration

---

Requirements

• Add automatic accessibility testing add-on to storybook #187

---

Acceptance Criteria

• All accessibility tests are passing and there are no validations or incomplete tests for the components:
  • TextButton > @seemann
  • IconButton > @seemann
  • Checkbox
  • Radio > @kaikdi
  • RadioGroup > @kaikdi
  • Select > @kaikdi
  • TextInput
  • TextArea
  • ToggleSwitch
  • Counter
  • FormCaption
  • FormCaptionGroup
  • FormLabel
  • ButtonGroup @kaikdi
  • NumberInput

---

Background information

• ...

---

Incomplete tests from #187

• TextButton: Elements must have sufficient color contrast (disabled=true & theme=light)
• Checkbox: Form field must not have multiple label elements (hasLabel=true)
• Radio: ARIA attributes must conform to valid values (disabled=true / hasError=true)
• NumberInput: Elements must only use permitted ARIA attributes (if ariaLabel has a value)

---

Violations from #187

• IconButton: Elements must only use allowed ARIA attributes (disabled=true)
• TextButton:
  • id attribute value must be unique (all states & variants)
  • ARIA commands must have an accessible name (loading=true)
  • Elements must have sufficient color contrast (disabled=true & theme=light / variant=secondary / variant=encourage) > Follow up tasks were created: TextButton - resolve contrast violation in disabled state #660 & TextButton - encourage variant does not reach contrast minimum in light theme #661
• Tooltip (should be checked again after Tooltip - refactor component to use floating-ui #461 ): elements must have alternate text (all variants except toolTipArrow=hide)
• Checkbox:
  • Form elements must have labels (hasLabel=false / checkInputId="" / hasLabel=true & label="")
  • Elements must have sufficient color contrast (theme=dark & hasError=true / theme=dark & showHint=true)
• NumberInput:
  • Buttons must have discernible text (readonly=false / unit=defined)
  • Form elements must have labels (placeholder="")
  • Elements must meet minimum color contrast ratio thresholds (theme=dark)
• Radio:
  • Form elements must have labels (label="" / optionId="") > this is just using the component wrong, we should not invest too much effort in preventing users to do that, there will almost always be a way to break things
  • Elements must have sufficient color contrast (disabled=true / theme=dark & showHint=true / theme=dark & hasError=true)
• RadioGroup:
  • ARIA attributes must conform to valid values (hasError=true)
  • Elements must have sufficient color contrast (theme=dark & hasError=true / theme=dark & showHint=true)
• Select: Elements must have sufficient color contrast (theme=dark & showHint=true / theme=dark & hasError=true) > error state contrast needs to be fixed by design, a follow up task will be created
• TextInput:
  • ~Elements must have sufficient color contrast (theme=dark & hasError=true / theme=dark & showHint=true) ~ > error state contrast needs to be fixed by design, a follow up task will be created
  • Form elements must have labels (placeholder="")
• TextArea: Elements must have sufficient color contrast (theme=dark & hasError=true / theme=dark & showHint=true / theme=dark & showCounter=true & warningState=true / theme=dark & showCounter=true & errorState=true / showCounter=true & size=md)
• ToggleSwitch: Elements must have sufficient color contrast (theme=dark & showHint=true)
• FormCaption (currently still named FormHint): Elements must have sufficient color contrast (theme=dark)
• FormCaptionGroup (currently still named FormInfo): Elements must have sufficient color contrast (theme=dark)
• FormLabel:
  • Elements must have sufficient color contrast (theme=dark & variant=error)
  • id attribute value must be unique (all states & variants)
• ButtonGroup:
  • ARIA commands must have an accessible name (all states & variants)
  • Elements must have sufficient color contrast this only happens due to the "labels" next to the component, should be fixed with documentation task

Follow-Up Task

Some components received new errors while this issue was in progress, these issues will be fixed in a follow-up task. This includes the following components:

• Checkbox

Incomplete tests:

• RadioGroup: ARIA attributes must conform to valid values (disabled=true / hasError=true)
• Counter: Elements must have sufficient color contrast (size=md)
• TextArea: Elements must have sufficient color contrast (readonly=true / hasError=true /hasCounter=true & size=md)
• ToggleSwitch: Form field must not have multiple label elements (all states & variants)
• FormCaption: Elements must only use permitted ARIA attributes (if ariaLabel has a value)
• FormCaptionGroup: Elements must only use permitted ARIA attributes (probably inherited from FormCaption if ariaLabel has a value)

Components that need to be checked as well after refactoring tasks:

• Tooltip
• TabBar
• SliderSingleValue
• SliderTwoValues

[kaikdi]

Radio/RadioGroup
Select
To properly test Dark Theme, you have to manually select "Dark" in controls.
When the color contrast is not good enough, this have to be adjusted through the tokens.

[thrbnhrtmnn]

Hey @kaikdi , when I manually set the background color in storybook to the same background color we use in Figma (hsl(216 9% 10% / 1), at least some contrast violations disappeared for the RadioGroup. Could you try out to change the default background color for the dark mode in storybook?

[kaikdi]

@thrbnhrtmnn I applied custom Dark color on this PR
This seems to resolve the issue. Thanks 👍

[thrbnhrtmnn]

@seemann , @kaikdi , I checked everything again after the correct dark theme background was applied and crossed out all errors that have been solved

[thrbnhrtmnn]

Checked everything again and the only open topic is for the NumberInput and maybe the Tooltip once the refactored version is merged.

[thrbnhrtmnn]

As decided today all open issues will be done in a follow up task after alpha release