Stack view edit mode accessibility issues

[gnomeontherun]

Describe the bug

The edit mode of stack view has several defects

• The form fields are not labeled (should probably use new forms inputs)
• The stack-block-changed triangle needs a unique textual equivalent (when you've edited a field) Screen reader users will not hear what these shapes are meant to convey when they read them. It is important that part of the textual equivalent is unique, e.g., 'record 1 has changed' and 'record 2 has changed'.
• Close button doesn't have an accessible name
• Screen readers don't hear anything when edit dialog appears

How to reproduce

https://stackblitz.com/github/clane/clarityTest2/tree/master/clarity-test-app

Steps to reproduce the behavior:

• Using a screen reader, go to the 'Stack View Edit' example
• Activate the Edit Button
• Observe you don't hear anything about the now opened edit dialog.
• Read any of the input fields and try to determine the purpose of any field.
• Edit a field
• Read any content or control visually associated with the stack-block-changed triangle. Notice that you do not hear what his shape is meant to convey. You would expect to hear something like 'One of Jon Doe's records has changed'.
• Close button in edit mode is not accessible (may be solved by modal refactorings)

Expected behavior

• Use aria-label to provide a unique accessible name for each input field.
• Use aria-label to provide a unique textual equivalent for the stack-block-changed triangle. The textual equivalent should reflect the context of each stack.
• While a stack is collapsed, Provide an 'id' attribute with the stack-block-changed triangle to be used with aria-describedby on the adjacent stack buttons. This will allow the stack-block-changed triangle(s) to provide the intended information to screen reader users.
• Use aria-label to provide and accessible name such as 'close stack edit mode dialog'
• Move focus to the modal title on open

Versions

App

• Angular: [e.g. 6]
• Node: [e.g. 8.10.0]
• Clarity: [e.g. 0.12.5]

Device:

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

This is a combination of several issues related to edit mode, some of which may be resolved in the modal itself already.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.