Skip to:
Content

BuddyPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#7711 closed defect (bug) (fixed)

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

Reported by: mercime's profile mercime Owned by: mercime's profile mercime
Milestone: 3.0 Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-patch has-screenshots commit
Cc:

Description (last modified by 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.

Attachments (8)

search-button-offscreen-groups.gif (203.3 KB) - added by mercime 6 years ago.
Groups Directory
search-button-offscreen-send-invites.gif (114.0 KB) - added by mercime 6 years ago.
Send Invites Screen
search-button-offscreen.gif (191.8 KB) - added by mercime 6 years ago.
Activities Directory
search-button-groups-ok.gif (103.5 KB) - added by mercime 6 years ago.
Search button - Groups fixed
search-button-send-invites-ok.gif (70.7 KB) - added by mercime 6 years ago.
search button - send invites ok
search-button-activity-ok.gif (286.3 KB) - added by mercime 6 years ago.
search button - activity
7711.patch (6.9 KB) - added by mercime 6 years ago.
7711-2.patch (6.6 KB) - added by mercime 6 years ago.

Download all attachments as: .zip

Change History (22)

@mercime
6 years ago

Groups Directory

@mercime
6 years ago

Send Invites Screen

@mercime
6 years ago

Activities Directory

#1 @mercime
6 years ago

  • Description modified (diff)

#2 @mercime
6 years ago

  • Description modified (diff)

#3 @mercime
6 years ago

  • Description modified (diff)

#4 @mercime
6 years ago

  • Keywords has-screenshots added

#5 @hnla
6 years ago

@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.

#6 @mercime
6 years ago

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 :)

Version 0, edited 6 years ago by mercime (next)

#7 @DJPaul
6 years ago

  • Milestone changed from Awaiting Review to 3.0

@mercime
6 years ago

Search button - Groups fixed

@mercime
6 years ago

search button - send invites ok

@mercime
6 years ago

search button - activity

@mercime
6 years ago

#8 @mercime
6 years ago

  • Keywords has-patch added; has-screenshots removed

@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.

#9 @mercime
6 years ago

  • Keywords has-screenshots added

@mercime
6 years ago

#10 @mercime
6 years ago

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.

#11 @DJPaul
6 years ago

  • Keywords commit added

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

#12 @mercime
6 years ago

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

#13 @mercime
6 years ago

  • Owner set to mercime
  • Status changed from new to assigned

#14 @mercime
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Last edited 6 years ago by mercime (previous) (diff)
Note: See TracTickets for help on using tickets.