C2LC-516: Ensure the actions menu has appropriate markup, ARIA and labels

Metadata

Source
C2LC-516
Type
Sub-task
Priority
N/A
Status
Done
Resolution
N/A
Assignee
N/A
Reporter
Michelle D'Souza
Created
2021-10-13T16:23:56.988-0400
Updated
2022-02-15T10:08:23.632-0500
Versions
N/A
Fixed Versions
  1. Coding Env 1.2
Component
  1. Coding Environment

Description

Actions menu marked up as <div>s instead of a list

It would likely be more clear if the menu was marked up as a <ul> instead of <div>s. For one it would inform an AT user how many items there are and where in the list they are at. In particular this would be helpful because the actions menu as is will loop through just those items and it can become disorienting for users.

Actions menu requires appropriate ARIA role

There isn’t an ARIA role on the menu. The appropriate role (e.g. menu) should be determined and marked up appropriately.

Actions menu items labels/state are confusing

When an item is checked the label is “Show” and the aria-label is something like “Show forward 2 squares”. When it is unchecked the label is “Hide” and the aria-label is something like “Hide forward 2 squares”. This is confusing, usually the labels would be constant and the check state would indicate what state it’s in. In the following example, clicking the checkbox hide or show the related element. The striked out text is the best clue but this is not provided to an AT.