Make it more clear that the first folder in the list is the target folder

[kewisch]

From #148:

It took me a while to understand that I could just press Enter/Return to move a message to the top folder in the list. I think it would be great if by default the first folder in the list was highlighted automatically in the same way it becomes highlighted when using the down and up arrows (light blue background on my machine). That would make it clear more quickly that I could just press Enter/Return to move a message immediately.

[kewisch]

From #148 (comment)

I modified the code to implement the second point of this issue. The new code is here: https://github.com/micz/quickmove-extension/tree/issue_167_work

In details:

I added an observer to react the first time the list is populated if nothing is selected. Now the first element is always selected. https://github.com/micz/quickmove-extension/blob/db6e04eafefa1acdeae571bad7ad626a79ec3f55/src/popup/baseItemList.js#L245-L255

Working on this feature, I tried to improve how the list navigation works. So I changed the original nthItem method to add this features:

* When using the up/down arrows, the search field is always selected, so it's always possibile to change the search keywords without the need to refocus it.

I'm worried this would be an issue with accessibility. There should be one item that has the focus, and if we force the focus to stay on the textbox it might not be clear to screen readers that a folder was selected, and since it isn't the focused item it might not read it aloud.

* When changing the keywords, the selected row is kept selected if it's part of the new list.

This is great! The logic before was very basic.

* Pressing the up/down arrows moves the selection starting from the current one.

👍

* If nothing is selected it starts as it does now (first or last element).

👍

* When moving past the first or last element it goes to the last or first without stopping in the search field like it does now.

👍

[kewisch]

@micz FYI see comment above :)

[micz]

I'm worried this would be an issue with accessibility. There should be one item that has the focus, and if we force the focus to stay on the textbox it might not be clear to screen readers that a folder was selected, and since it isn't the focused item it might not read it aloud.

In the last few weeks, I've been using a custom version with this feature, and keeping the textbox focused has proven to be really useful. I can write a query string, navigate with the arrow keys, and refine the query without needing to refocus the textbox. Additionally, I can move directly from the last item to the first.
In my opinion, it's working great.

I'm not an accessibility expert, searching online I found this: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant.
It seems to me that this could be a solution to maintain the new behavior without accessibility concerns.
What do you think?

[kewisch]

aria-activedescendant sounds interesting! You might need to generate an ID for each element to be able to use it, but it seems to do exactly what we're looking for. Firefox devtools has an accessibility inspector that you can use to see what the accessibility tree looks like for the popup, it might help you see what a screen reader sees. The other additional option is to enable a screen reader, close your eyes, and try to navigate it listening only to what the reader tells you.

Can you send me the custom version you have on this? I'd love to try it out to see how it feels.

[micz]

This is the version I'm currently using. It has some other modifications.

quickmove-extension-extended.zip
(rename the file to .xpi)

The code is here: https://github.com/micz/quickmove-extension/tree/extended

Let me know if it's ok to go on with the implementation of this feature.

[micz]

I made PR #215 without aria elements as agreed.