Focus Management

Problem: Many applications do not have focus management for accessibility.

Solution: Properly code pages should manage focus properly.

Focus management on Create, Read, Update and Delete (CRUD) Operations

Managing focus while performing normal CRUD operations is vital to making a page accessible. Properly managing here the focus is, and what happens when users edit records is an important consideration for making user friendly pages.

Considerations for Focus Management on CRUD Operations

1. Focus management is an advanced topic for accessibility and does require some coding to ensure focus is managed to allow assistive technology users to perform operations on a page.
2. In the example above, we are presenting the user with a table, filled with customer information.
3. In order to prevent exess text wrapping within the cells, which can result in tall rows and a poor viewing experience, the rows only display some of the customer infomation.
   1. Additional information about each customer is can be viewed by selecting the Details button.
4. When a user selects the Details button, a modal is presented with a form containing additional customer attributes. The form is in view only mode, all fields are included in the focus order (tabbable), but are read only.
5. Upon opening the modal, focus is placed in the first form field in the natural eading order of the modal.
6. When a modal is present, focus is always trapped inside the modal.
7. The Edit button is available within the modal. When selected the customer details form becomes editable.
8. While in Edit mode, a Save button is presented on the modal. Selecting the Save button does not close the modal.
1. If a typical workflow does not include adding multiple rows at a time, the Save btton does not close the modal.
2. If a typical workflow involves entering multiple customers at a time, a Save and Close and a Save and Add New buttons are appropriate.
9. Users may close the modal at any time by selecting the Cancel button, or the Close button in the upper right corner.
10. In this example, the user is not prompted to save any unsaved changes before closing the model. Prompting a user about unsaved changes is something to consider.
11. The Add New button opens a modal in edit mode, and users can make edits and Save or Cancel. Again, Save does not close the modal.
12. When a user selects to Save the row, if all required fields are filled in and the save is successful, a confirmation message is displayed and focus remains on the Save button.
13. If a user selects Save and a required field is not filled in, a message is presented, and focus is placed in the field that was invalid
14. If the user has selected the Details button, upon closing the modal focus is returned to the Detials button that was selected.
15. If a user has selected the Add New button and closes the modal, focus returns to the Add New button.
16. If a user selects the Delete button, a confirmation modal is presented with focus on the Cancel button.
1. If a user Cancels the delete action, focus is returned to the Delete button that was selected.
2. If a user selects OK, the modal is closed and focus is placed in the first column of the table.

Coding Practices for Focus Management on CRUD Operations

1. Each buttton has a unique Id attribute, so that focus can be set to the element.
2. The Details and Delete buttons are unique by using the Id of the database row as its identifier.
1. The delete button prefixes the Id with a D.
3. Details button: id=cust.Id.ToString()
4. Delete button: id="(SetDeleteButtonId(cust.Id))"
5. The delete Id is set by calling a method and returning the Id with a D concatonated to the end.
private string SetDeleteButtonId(int Id)
{ mySetDeleteId = Id.ToString() + "D";
return mySetDeleteId;
}
6. In .Net Blazor pages, focus needs to be set in the lifecycle method OnAfterInitialized.
7. Focus is set by calling a common Javascript function called SetFocus(identifier).
8. Focus is trapped in the modal by calling a common Javascript function called TraapFocus.