Issue Summary

The custom checkboxes defined inappropriately which are not operable through screen reader and keyboard.

Steps to Reproduce

1. Navigate to the "Profile picture for admin" button present in the header.
2. Activate it, it will expand with few options.
3. Select "Profile" option among those option.
4. On appearing "Profile" page, navigate to "Task" link and activate it.
5. Activate the "Created by me" and "Incomplete" toggle buttons.
6. Observe that table has been updated below.
7. Within table custom checkboxes has been defined inappropriately.
8. Verify that these checkboxes are inaccessible.

Screen Recording

Screen Recording 2023-11-24 at 4.07.24 PM.mov

Actual Results

The custom checkboxes "Edit this home page - Click Edit in the top right of this screen to customize your Space home page", "Create your first page - Click the Create button in the header to get started", and so on are not operable for screen reader users. The checkboxes are not focusable for screen reader and keyboard-only when users press Spacebar or Enter key.

Additionally, The checkboxes are defined using CSS which causes blocker for the users.
As a result, screen reader and keyboard-only users cannot access the functionality associated with the checkboxes.

Expected Results

• Use the native elements to modify the checkboxes such as <input> and <label> elements and also update the status of the checkbox on user interaction.
• Add "for" and "id" attributes with identical value to associate them programmatically.

Ensure that checkboxes must be operable for screen reader and keyboard-only users.
Additionally, the screen reader should identify the role and state of the checkboxes and radio buttons.

Code Snippet

<input type="checkbox" id="blog" name="write a blog post" checked>
<label for="blog">Write a blog post - Click "Create" and select "Blog Post" to share newsLearn</label>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest