Create a Space - New Team Space : Action cannot be performed by keyboard alone

Steps to Reproduce

1. Open URL to the page
2. Navigate to Spaces and select page from "Recent pages"
3. Navigate to the Next, "you might want to" checkboxes under "Complete these tasks to get started".
4. Try to access checkboxes such as "Customise the home page", "Create additional pages", "Write a blog post", "Manage permissions" and observe whether checkboxes are accessible through keyboard.

Screenshot

Actual Behaviour

While navigating with Keyboard, the checkbox elements such as "Customise the home page", "Create additional pages", "Write a blog post", "Manage permissions", etc does not receive keyboard focus. With screen reader, the checkboxes doesn’t get checked or unchecked with space or VO keys.

Currently the checkbox elements can be accessed with mouse only since it is coded using CSS background-image property incorrectly.

Due to this keyboard and screen reader users are not able to access the functionality associated with checkboxes effectively.

Expected Result

The checkbox elements should receive keyboard focus & get activated via space or VoiceOver keys (CTRL + OPT + Space).

Use native HTML <input type="checkbox"> element to create checkbox on the page and use <label> element to create labels & ensure the labels & input elements are programatically associated via for/id relationship.

Or

Refer to the following example for more understanding on custom checkbox implementation.

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/checkbox/checkbox-1.html 

Bug Ref: 725256