First item in search result, blue highlight is confusing


(lid) #1

I found having the first item in the drop down selected by default (highlighted in blue) confusing.

At first I associated the blue with the “new”, like the notifications menu. and I thought it was a bug.
Took me a while to understand that the first item is actually selected / auto focused

Having the 1st element auto-focused by default can be convenient. As the user type he can see what item will be used if he hits Enter, but this only after learning that this blue is actually the item being focused.

Option 1

This example utilize the Focus CSS styling instead of the .selected class. It make sense because the item is technically in focus.

or

Option 2

This is not my favorite option, but by just adding the left right border, differentiate the item from being associated with
new context implicitly. And it is also in common with topic keyboard navigation.

Option 3

change the selected color to a more neutral color


(TechnoBear) #2

[quote=“Lid, post:1, topic:18986”]
Option 1

This example utilize the Focus CSS styling instead of the .selected class. It make sense because the item is technically in focus.

or

Option 2

This is not my favorite option, but by just adding the left right border, differentiate the item from being associated with
new context implicitly. And it is also in common with topic keyboard navigation.
[/quote]Unfortunately, both those options are likely to result in more confusion for keyboard navigators, as there is already another anomaly in the search menu. While the “Notifications” and “Hamburger” menus can only be navigated by tabbing, the search menu cannot be navigated by tabbing - only by using the up/down arrows. j/k also do not work on any of the dropdowns, so to use that kind of styling here would be misleading.


(lid) #3

Actually the search result can be navigated by tabbing as well, and also by using the up and down arrow.
I personally don’t see a conflict with the focus styling.

This is why I prefer option one derivatives.

I see your point on option 2, My intention is not to associate with JK navigation, but rather indicate that item is in a navigation mode. (different keys tough)

Thanks for the input.


(cpradio) #4

You can tab, but pressing Enter activates the one selected by the up/down keys, it doesn’t select the one with a tab focus.


(lid) #5

So may be we can kill :bird: :bird:


(cpradio) #6

Yes, I’d love to see that handled better. :smile:


(lid) #7

Try running this in the console. it will add tab support to the search.

  1. open search (keyboard shortcut “/”)
  2. type “test”
  3. hit the tab to go down / shift+tab to go up
    3.1 up and down arrow is still usable but their behavior was not modified.
  4. “show more” is also focus-able, but you have to use the shift+tab

known issues

  1. It is not fully support the view after hitting “show more”, you can’t hit the (x) button

  2. it does not support the checkbox for filtering per topic

  3. the code is written as hack

  4. There is a better way to do all this.

$('body').on('keydown.search', function(e) {
    if ($('#search-dropdown').is(':visible')) {

        if (e.which == 9 && e.shiftKey == true) { //tab-up

            var searchContent = Discourse.__container__.lookup("controller:search").get("content");
            var selectedIndex = Discourse.__container__.lookup("controller:search").get("selectedIndex");
            var f1, f2, f3;
            f1 = f2 = f3 = fghost = function() {
                return false;
            }
            console.log(searchContent);
            console.log(searchContent[0]);


            if (searchContent.length > 0) {

                if (searchContent[0].more == true) {

                    f1 = function() {
                        console.log(selectedIndex);
                        if (selectedIndex == 0 || (selectedIndex == -1 && document.activeElement == $("a.filter")[0])) {
                            console.log("f1", selectedIndex);
                            console.log("show more 1");
                            if (document.activeElement == $("a.filter")[0]) {

                                setTimeout(function() {
                                    $("#search-term").focus();
                                }, 100);
                                Discourse.__container__.lookup("controller:search").set("lastIndex", null);
                            } else {
                                Discourse.__container__.lookup("controller:search").set("selectedIndex", -1);
                                Discourse.__container__.lookup("controller:search").set("lastIndex", selectedIndex);
                                setTimeout(function() {
                                    $("a.filter")[0].focus();
                                }, 100);
                            }

                        }
                    }

                }
                if (searchContent.length > 0 && searchContent[1].more == true) {
                    f2 = function() {
                        if (selectedIndex <= -1 && document.activeElement == $("a.filter")[1]) {
                            Discourse.__container__.lookup("controller:search").set("selectedIndex", Discourse.__container__.lookup("controller:search").get("lastIndex") - 1);
                            setTimeout(function() {
                                $("#search-term").focus();
                            }, 100);
                            Discourse.__container__.lookup("controller:search").set("lastIndex", null);
                        } else if (selectedIndex == searchContent[0].results.length) {
                            console.log("f2", selectedIndex);
                            console.log("show more 2");
                            setTimeout(function() {
                                $("a.filter")[1].focus();
                            }, 100);
                            Discourse.__container__.lookup("controller:search").set("selectedIndex", -1);
                            Discourse.__container__.lookup("controller:search").set("lastIndex", selectedIndex);
                        }
                    }
                }
                if (searchContent.length > 1 && searchContent[2] && searchContent[2].more == true) {
                    f3 = function() {

                        if (selectedIndex == searchContent[0].results.length + searchContent[1].results.length + 1) {
                            console.log("f3", selectedIndex);
                            console.log("show more 3");
                        }
                    }
                }

            }


            f1();
            f2();
            f3();


            if (Discourse.__container__.lookup("controller:search").get("selectedIndex") === 0) {

            } else {
                e.preventDefault();
            }

            if (selectedIndex > 0) {
                Discourse.__container__.lookup("controller:search").send("moveUp");
            }


        } else if (e.which == 9) { //tab-down

            if ((lastIndex = Discourse.__container__.lookup("controller:search").get("lastIndex")) != null) { //if tab-down and lastIndex is not null we should restore select to last selectedIndex
                console.log("lastIndex", lastIndex);
                Discourse.__container__.lookup("controller:search").set("selectedIndex", lastIndex);
                Discourse.__container__.lookup("controller:search").set("lastIndex", null);
                setTimeout(function() {
                    $("#search-term").focus();
                }, 100);
            } else {
                Discourse.__container__.lookup("controller:search").send("moveDown");
            }

            e.preventDefault();
        } else if (e.which == 13) {

            if ($("a.filter")[0] == document.activeElement) {
                $("a.filter")[0].click();
            } else if ($("a.filter")[1] == document.activeElement) {
                $("a.filter")[1].click();
            }

        }


    }
});

(lid) #8

V2
this code take a different approach from the code in the last post.

Copy-paste to code console - to test

This version enable tab selection and synchronize the selection.

Using the tab you can get the show more in focus

If the user revert to using up/down arrow, focus will restore to search box by default, which may be probelmatic if the selected item is at the bottom of the list focus to the input will likely to scroll up.

This code does not address losing focus after “show more” for tab navigations


Search box. Results are no longer selectable with Up / Down arrow Keys
(Adam Capriola) #9

I personally haven’t found the blue highlighting confusing, but I’ve had a couple users say it strains their eyes. They’ve suggested using yellow instead… and now I just noticed that if you hover your mouse over a result, it does turn yellow (I’d always used my arrow keys):

This seems slightly weird to me. Perhaps the first result should be highlighted in yellow by default, then the highlighting is removed if your mouse is hovering over a different result? I’m not seeing the practicality of having two highlights going on at the same time.