Skip to:
Content

BuddyPress.org

Opened 16 months ago

Closed 15 months ago

Last modified 15 months ago

#7711 closed defect (bug) (fixed)

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

Reported by: mercime Owned by: 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 16 months ago.
Groups Directory
search-button-offscreen-send-invites.gif (114.0 KB) - added by mercime 16 months ago.
Send Invites Screen
search-button-offscreen.gif (191.8 KB) - added by mercime 16 months ago.
Activities Directory
search-button-groups-ok.gif (103.5 KB) - added by mercime 15 months ago.
Search button - Groups fixed
search-button-send-invites-ok.gif (70.7 KB) - added by mercime 15 months ago.
search button - send invites ok
search-button-activity-ok.gif (286.3 KB) - added by mercime 15 months ago.
search button - activity
7711.patch (6.9 KB) - added by mercime 15 months ago.
7711-2.patch (6.6 KB) - added by mercime 15 months ago.

Download all attachments as: .zip

Change History (22)

@mercime
16 months ago

Groups Directory

@mercime
16 months ago

Send Invites Screen

@mercime
16 months ago

Activities Directory

#1 @mercime
16 months ago

  • Description modified (diff)

#2 @mercime
16 months ago

  • Description modified (diff)

#3 @mercime
16 months ago

  • Description modified (diff)

#4 @mercime
16 months ago

  • Keywords has-screenshots added

#5 @hnla
16 months 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
16 months 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 :)

Last edited 16 months ago by mercime (previous) (diff)

#7 @DJPaul
16 months ago

  • Milestone changed from Awaiting Review to 3.0

@mercime
15 months ago

Search button - Groups fixed

@mercime
15 months ago

search button - send invites ok

@mercime
15 months ago

search button - activity

@mercime
15 months ago

#8 @mercime
15 months 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
15 months ago

  • Keywords has-screenshots added

@mercime
15 months ago

#10 @mercime
15 months 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
15 months 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
15 months ago

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

#13 @mercime
15 months ago

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

#14 @mercime
15 months 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 15 months ago by mercime (previous) (diff)
Note: See TracTickets for help on using tickets.