CB-5446 chore: keyboard navigation improvements #2935
Conversation
| } else { | ||
| el.setAttribute('tabindex', '-1'); | ||
| } |
There was a problem hiding this comment.
I suppose this set of elements can include elements without aria-selected attribute. Is this okay to set tabIndex for them also to -1? Or it is supposed to be only for elements with aria-selected attribute?
There was a problem hiding this comment.
this is okay, if element don't have this attribute then tabindex=-1 is okay, but here more problems over -1 and 0 because sometimes you can't restore initial value (when you don't have aria-selected or when element was tabindex=0 initially)
but for now seems that it works, maybe we will found bugs related to this function later
| switch (e.key) { | ||
| case 'ArrowRight': | ||
| case 'ArrowDown': | ||
| newIndex = (currentIndex + 1) % focusableElements.length; // Move to next element |
There was a problem hiding this comment.
lets move to next/prev element into functions
| right: 0; | ||
| bottom: 0; | ||
| outline-offset: -1px; | ||
| outline: -webkit-focus-ring-color auto 1px; |
There was a problem hiding this comment.
this one is not working for Firefox
sources:
https://stackoverflow.com/questions/7538771/what-is-webkit-focus-ring-color
https://css-tricks.com/copy-the-browsers-native-focus-styles/
| @@ -69,6 +71,10 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>( | |||
| const loading = dataModel?.isLoading() ?? true; | |||
| const dataFormat = result?.dataFormat || ResultDataFormat.Resultset; | |||
| const splitState = useSplitUserState('table-viewer'); | |||
| const navRef = useListKeyboardNavigation( | |||
| '[data-presentation][tabindex]:not(:disabled), [data-presentation-tools][tabindex]:not(:disabled), [data-presentation-header][tabindex]:not(:disabled), [data-presentation-bar][tabindex]:not(:disabled)', | |||
There was a problem hiding this comment.
just an idea (not required to implement right now): we should implement some kind of selector builder with chain of responsibility pattern cause now it is easy to miss-type something and get a bug
No description provided.