Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focusing a grid cell with Home and Ctrl + Home #1287

Open
Stamo-Gochev opened this issue Dec 17, 2019 · 10 comments
Open

Focusing a grid cell with Home and Ctrl + Home #1287

Stamo-Gochev opened this issue Dec 17, 2019 · 10 comments

Comments

@Stamo-Gochev
Copy link

Stamo-Gochev commented Dec 17, 2019

I am looking at the spec examples regarding the Home and Ctrl + Home keys:
https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html#

Question 1: This is about "Example 1: Minimal Data Grid". Pressing Home focuses the first cell on the row, but should it focus the first "actiоnable" cell if there is such? Consider the following more advanced scenario:
https://demos.telerik.com/kendo-ui/grid/hierarchy
The first cell on each row allows the user to expand the row and show some custom HTML content (in this case another grid). Should this cell be focused instead of focusing the first content cell?

Question 2: Should the Ctrl + Home combination be used for focusing the first "actiоnable" cell in the Grid in general? For example, if the grid has a toolbar (the toolbar is part of the grid rendering), should Ctrl + Home focus the first button in the toolbar or the first "actionable" cell inside the grid cells only?

Question 2:1 The same scenario with the toolbar from the above, but the focused is moved from outside of the grid to it, e.g:

<input type="text" value="input1"/>
<grid-component-with-toolbar>

// the grid rendering is similar to
<div>
     <div id="toolbar">
      <table>
</div>

If the focus is on input1 and the user presses Tab, which should be the focused element - the grid toolbar, the first focusable element inside the grid toolbar or the first actionable cell inside the grid, e.g. a header with sorting or the first content cell.

Question 3: This is about "Example 2: Sortable Data Grid With Editable Cells". If the only sortable header is "Amount" (i.e. not the first header cell), pressing Ctrl + Home should focus the "Amount" column instead of the first content cell ("03-Jan-16"), right?

@JAWS-test
Copy link

Keyboard operation is also important for blind users who need to reach all cells in the grid efficiently with the keyboard, not only the cells that can be operated. Therefore the keys should always navigate to the first or last element and not only to the first or last one that can be operated.

@Stamo-Gochev
Copy link
Author

@JAWS-test The provided examples in the above link:
https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html#

act differently. That is why I need somebody from the team to provide more information on the questions.

@JAWS-test
Copy link

@Stamo-Gochev
The keyboard operation (with Firefox) works exactly as described on the page

@Stamo-Gochev
Copy link
Author

@mcking65 @jnurthen Any thoughts on the above?

@Stamo-Gochev
Copy link
Author

Stamo-Gochev commented Dec 19, 2019

A follow up question - what is the expected behavior for Ctrl+End if the grid also contains a pager at the bottom (this is similar to the toolbar at the top, but the pager is at the bottom, but is still part of the grid), e.g:
image

How focus should be moved from a cell on the last row of the grid to the pager and from the pager back to the grid?

@JAWS-test
Copy link

I would say: please never place a toolbar or pager inside a grid or table. A grid or table should only contain cells with table data. Toolbar and pager belong before or after the grid/table

@Stamo-Gochev
Copy link
Author

Stamo-Gochev commented Dec 20, 2019

They are not part of the table rendering, but are part of the main element that contains the grid table in order to form the component. The rendering is mentioned in the first post and I am adding the pager for clarification:

// the grid rendering is similar to
<div>
     <div id="toolbar">
      <table>
      <div id="pager">
</div>

The navigation inside the toolbar, pager, etc. can happen separately, but ideally there should be a handy way to navigate between the inner components of the grid as it is a "composite" component.

@JAWS-test
Copy link

I would say that grid navigation refers only to the grid and is also limited to the grid. All elements before and after the grid should normally get the focus (using the Tab key). These elements should not get the focus with grid navigation.

When I look at https://demos.telerik.com/kendo-ui/grid/index, I notice the following problems:

  • For most navigation steps, the keyboard focus is not visible.
  • Currently the pager is not getting focus.
  • Navigation within the table is not possible with the arrow keys either.
  • The column headers get the focus with the Tab key.

@Stamo-Gochev
Copy link
Author

The demo does not have its navigation enabled. Here is the navigation demo:
https://demos.telerik.com/kendo-ui/grid/keyboard-navigation

This should not be used as a reference as I am researching ways to optimize the navigation. Indeed, the spec describes navigation in the table only, but as the grid is a composite component, it includes a toolbar, pager, etc. in it.

As the toolbar and pager are considered by the end user as a part of the composite grid component and not as separate components, why is using the tab key the preferred method for navigation? This makes the toolbar and pager seem like separate components from the grid.

@JAWS-test
Copy link

I disagree: There is no grid component, but there are grids, toolbars etc. - and these are different elements that should not be nested within each other

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants