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

[mercime]

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>
		<div class="group-invites-search subnav-search clearfix" role="search">
			<div class="bp-search"> ... etc ... </div>
		</div>
		<li class="last"> (empty)
		</li>
	</div>
</div>

2. 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>
	<div class="group-invites-search subnav-search clearfix" role="search">
		<div class="bp-search> ... etc ...</div>
	</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>
			</button>
			// 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>
			</button>
	</li>
</div>

[mercime]

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

[imath]

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

[mercime]

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.

[imath]

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

[imath]

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