BP-Nouveau: Keyboard focus lost when Search buttons are hidden off-screen

[mercime]

Checking the accessibility of the new template pack, when I tab through the front end, keyboard focus disappears, i.e., jumps to top of screen each time after tabbing on the search input field. Depending on the screen, you can tab 2-3 more times after the search input field and not know where you are on the page. This is caused by hiding the search buttons off-screen with the following style:

.buddypress-wrap form.bp-dir-search-form button[type="submit"],
.buddypress-wrap form.bp-messages-search-form button[type="submit"],
.buddypress-wrap form.bp-invites-search-form button[type="submit"] {
	height: 0;
	left: -999em;
	overflow: hidden;
	position: absolute;
	top: -999em;
}

Per style above and quick double-check, search buttons need to be fixed in the following:

• Groups directory, Group Memberships, and Group Invites screen
• All Notifications screens
• All Activities screens
• All Messages screens except Message > Compose
• Members directory screen
• Send Invites screen

Attaching 3 animated gifs captured in 3 of the above-mentioned pages to show how keyboard focus is affected.

[mercime]

Groups Directory

[mercime]

Send Invites Screen

[mercime]

Activities Directory

[hnla]

@mercime that's a good spot. I agree empty tabbing from the input control to the button results in a loss of focus, although if actually running a search the tabbing and subsequent button action do work as expected, however we do need to improve this, if you have any solutions do patch for testing otherwise I'll try to look at when I have a moment spare.

[mercime]

if actually running a search the tabbing and subsequent button action do work as expected

@hnla Yes, using screen reader and tabbing, you will hear the search button read out loud.

If you have any solutions do patch for testing otherwise I'll try to look at when I have a moment spare.

Haven't made one yet. Likewise :)

[mercime]

Search button - Groups fixed

[mercime]

search button - send invites ok

[mercime]

search button - activity

[mercime]

@hnla Attached patch and animated gifs of fixed issue.

Needed to remove the @hide mixin which hid elements off-screen and caused focus to disappear in the air. Also removed .bp-hide class from the submit buttons in style sheets as well as the JS functions which hid the search submit buttons from view.

[mercime]

7711-2.patch does not remove .bp-hide class as it's used elsewhere but changes declaration block to display: none;. Patch fixes this ticket and #7720, as well as a partial fix for #7714.

[DJPaul]

Great find, great fix. As always, your efforts to visually explain the problem and prove the solution is inspiring!

[mercime]

Thanks @DJPaul :D Will commit in a few minutes.

[mercime]

In r11906:

Nouveau: Fix keyboard focus for hidden form controls.

This prevents loss of focus for keyboard users as they tab through the form
controls where initial state is hidden.

Fixes #7711, #7720. See #7714.