Accessibility : Enhance Dropdown Accessibility with Arrow Key Navigation #10378
Conversation
| let pos = parseInt(data.pos) | ||
| do { | ||
| pos++; // Move to the next position | ||
| nextElement = document.getElementById(data.comboboxId + '-entry-' + pos); |
There was a problem hiding this comment.
please try to avoid using getElementById, it's fragile on future changes.
Can we maybe use JSDialog.GetFocusableElements which we will just iterate?
or can we create helper: JSDialog.GetNextFocusableElement which will find element by iterating the DOM?
EDIT: it seems something exists already:
JSDialog.FindFocusableElement(
potentialCurrentElement.previousElementSibling,
'previous'
);
There was a problem hiding this comment.
or maybe even we can just use JSDialog.KeyboardGridNavigation ?
There was a problem hiding this comment.
we shouldn't implement the same ting few times, ideally it should be simple algorithm which uses "siblings" and not any "ids" and just looks for next one focusable on arrow right, previous on arrow left etc...
this way we can use it in any place without modification
There was a problem hiding this comment.
Yes i can try on that but still i think to get Dropdown container i need to use byID one time.
const comboboxEntries = document.getElementById(data.id +'-entries');
There was a problem hiding this comment.
EDIT: it seems something exists already:
JSDialog.FindFocusableElement(
potentialCurrentElement.previousElementSibling,
'previous'
);
This will not work as it also return the element if current is focusable we need to pass potential next element to this function and this will work...
like this :
There was a problem hiding this comment.
there is helper for that too: var dropdownRoot = JSDialog.GetDropdown(data.id);
we at least need to encapsulate all these "get by id" so it will be single place to modify in the future (if id generation will be changed)
There was a problem hiding this comment.
So indirectly need to get next element and pass to this function. Or better we just create new helper for it ?
There was a problem hiding this comment.
there is helper for that too:
var dropdownRoot = JSDialog.GetDropdown(data.id);we at least need to encapsulate all these "get by id" so it will be single place to modify in the future (if id generation will be changed)
I see okay then it will work
There was a problem hiding this comment.
Let me do the changes and test, Thanks :)
There was a problem hiding this comment.
less duplicated code == better :)
I would try:
JSDialog.KeyboardGridNavigation(it works left, right, up, down, might be not good)- if above doesn't work, please try to create generic:
JSDialog.KeyboardListNavigation(up,down only) - do custom thing for this one
Darshan-upadhyay1110
force-pushed
the
private/darshan/accessibility-add-keyboard-navigation-in-combobox-entries
branch
2 times, most recently
from
6fd6217
to
9fc9d1f
Compare
- to compare text value we need to compare the property and not a whole object Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com> Change-Id: I7db33c9280da229ec656e52c2fe8158739291085
- Enable Arrow key navigation in dropdown menus. - Allow users to move between options using Up/Down keys.( Specially for comboboxes entry) - Improve usability for screen reader and keyboard-only users. Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com> Change-Id: I60ad384d1ee2b176be8dd8c12c37fcd02dafe5a2
Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com> Change-Id: I21954a8c5c10c6f8f355fd6e4cb6949b2be9824e
Problem:
- in case of submenu (for example in Calc there is a conditional format menu )
- when we open submenu it and then press ESC it changes focus back to document
- and the main parent menu stays open without focus
Solution: - call LastElement focus before Clear dialog so it works as expected (MSO does the same)
Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Change-Id: Ic8fa988f3a8854a99c44d0fde5a7dec32e398739
Darshan-upadhyay1110
force-pushed
the
private/darshan/accessibility-add-keyboard-navigation-in-combobox-entries
branch
from
9fc9d1f
to
4012ddd
Compare
Summary
TODO
Checklist
make prettier-writeand formatted the code.make checkmake runand manually verified that everything looks okay