Skip to:

Opened 6 years ago

Closed 6 years ago

#7752 closed defect (bug) (fixed)

BP Nouveau: Group > Invite > screens have unwrapped `<li>` elements and `<button>`s issues.

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


  1. In <Group> Invite > My Friends & Pending Invites screens:
  • empty <li class="last"></li> without a <ul> wrapper
<div class="subnav-filters group-subnav-filters bp-invites-filters">
		<div class="group-invites-search subnav-search clearfix" role="search">
			<div class="bp-search"> ... etc ... </div>
		<li class="last"> (empty)
  1. In <Group> Invite > All Members screen:
  • <li> element does not have a <ul> wrapper
  • <button>s not seen nor clear for sighted users, should have a bp-tooltip, data-bp-tooltip, and an icon. Having said that ...
  • Replace <button>s above with the semantic links for pagination so the function of the element is clear for users of assistive technologies.
	<div class="group-invites-search subnav-search clearfix" role="search">
		<div class="bp-search> ... etc ...</div>
	<li class="last">
			// Use link instead of button below for pagination.
			<button type="button" id="bp-invites-prev-page" class="button invite-button">
				<span class="bp-screen-reader-text">Previous</span>
			// Use link instead of button below for pagination.
			<button type="button" id="bp-invites-next-page" class="button invite-button">
				<span class="bp-screen-reader-text">Next</span>

Attachments (3)

7752.patch (2.3 KB) - added by imath 6 years ago.
7752.2.patch (2.5 KB) - added by mercime 6 years ago.
group-invites-arrow.gif (19.6 KB) - added by mercime 6 years ago.

Download all attachments as: .zip

Change History (9)

#1 @mercime
6 years ago

  • Milestone changed from Awaiting Review to 3.0

#2 @mercime
6 years ago

Haven't checked out the source files yet, but some solutions off the bat:
For A. screens - Remove the empty <li class="last">
For B. screen - Replace <li class="last"> with a <div> wrapper instead, and replace <button>s with links

6 years ago

#3 @imath
6 years ago

  • Keywords has-patch reporter-feedback added
  • Owner set to imath
  • Status changed from new to assigned

@mercime All the things you're describing are generated by JavaScript, so i will work on it, i just added a patch (7752.patch) to try to comply with what's needed. Please tell me if I understood wrongly or if I forgot something.

6 years ago

#4 @mercime
6 years ago

Thanks @imath ! Attached patch:

  • moves left-arrow dashicon before the Previous text
  • changes Previous text in 2nd link to Next
  • adds bp-tooltip and data-bp-tooltip to provide context for sighted users

This still needs additional styling for mobile view.

#5 @imath
6 years ago

  • Keywords commit added; reporter-feedback removed

Thanks a lot @mercime 👍 I'm going to commit and close this ticket. But you're probably right about mobile styling, I will add a comment about it on #7783 as I've suggested a new layout that is probably not ideal for mobile :)

#6 @imath
6 years ago

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

In 12032:

BP Nouveau: improve markup and a11y of the Group invites UI

  • Only write pagination markup if there is more than one page of results.
  • Add BP Tooltips and use semantic links instead of buttons.
  • Use a div container for the pagination instead of an orphan li.

Props mercime

Fixes #7752

Note: See TracTickets for help on using tickets.