How can I unfocus the modal trigger button after closing the modal in bootstrap

Question

I can\'t seem to blur the button after closing the modal.

$(\'#exampleModal\').on(\'hidden.bs.modal\', function(e){
        $(\'button\').blur();
    });
         


        

Answer 1

Indeed, @cvrebert is right here that doing this negatively impacts accessibility.

blur() resets the focus, so keyboard users (both sighted keyboard users, and more critically users of screenreaders) are effectively bounced back to the very start of the page.

try http://jsbin.com/sukevefepo/1/ just using the keyboard: TAB to the button, trigger it with ENTER/SPACE, then TAB to the close button, ENTER/SPACE. now, after the modal is closed, TAB...and you see that your focus is back on the very first link. for anything but the most simple pages, this is a major annoyance at best, and can be dramatically disorienting for screenreader users).

in short: current Bootstrap behaviour is correct. I understand the desire to neuter the focused appearance of the modal trigger once the modal itself is closed...but using blur() is not the answer (unless you care little about keyboard/AT users, that is).

a more robust approach, that I'm planning to investigate for future version of Bootstrap, is to dynamically set a class on the body once a user first navigates using TAB/SHIFT+TAB (indicating a keyboard user), and to suppress :focus styles for these situations otherwise.