Accessibility for <ibm-table> and <ibm-modal> components

[sumanapp]

While, using the tab keystroke to navigate my application, when an ibm-table component is tabbed over the keyboard navigation control does not drill down into the table's rows. The control reaches the table header and then switches to the table footer avoiding the rows.

Is there a way to navigate through the table rows ( such that a specific row can then be selected by a (keyup.enter) event).

Thanks

[cal-smith]

Hey @sumanapp!

Try setting [isDataGrid]="true" on your table component, that will give you arrow key based table navigation.

docs: https://angular.carbondesignsystem.com/documentation/classes/src_table.table.html#isdatagrid
demo: https://angular.carbondesignsystem.com/?path=/story/components-table--basic (see the knobs panel -> "Data grid keyboard interactions" checkbox)

[sumanapp]

That helped. Thanks.

[sumanapp]

Also, when I use ibm-progress-indicator and switch from one step to the next, the focus drops from the dialog to the parent document object. Have you noticed such a problem before?

[cal-smith]

Answered in your other thread 👍

[sumanapp]

Another quick question: How is selectorPrimaryFocus used? Can I set selectorPrimaryFocus to say a button in my DOM? If I had to assign it to a button should I just use the button id as a vale for selectorPrimaryFocus? And have the button specify: modal-primary-focus attribute?

[cal-smith]

selectorPrimaryFocus is an internal property that defines the selector we use to find the element that should receive focus when the modal opens. You can add modal-primary-focus as an attribute to any focusable element within the modal and it will receive focus when the modal opens.

[sumanapp]

Thank you for that clarification. I will try applying modal-primary-focus on an element in the modal to test.