cuny-academic-commons / cbox-theme

Default theme for Commons In A Box
GNU General Public License v2.0
20 stars 15 forks source link

AJAX directory search broken due to accessibility changes #264

Closed r-a-y closed 5 years ago

r-a-y commented 5 years ago

In #261, we added some accessibility improvements to the directory search label.

For example, this:

<label for="members_search">
    <input type="text" name="members_search" id="members_search" placeholder="Search Members..." />
</label>

Became this:

<label for="members_search" class="screen-reader-text">Search Members</label>
<input type="text" name="members_search" id="members_search" placeholder="Search Members..." />

However, bp-default's JS requires that the <input> element be nested inside the <label>: https://github.com/buddypress/BP-Default/blob/master/_inc/global.js#L671

Specifically, this selector portion of the code:

target.parent().children('label').children('input').val()

That selector no longer applied after the accessibility change and broke AJAX directory searches.


Another way to pass WAVE, while ensuring that the AJAX directory search will work, is to make the markup like this:

<label for="members_search">
    <span class="screen-reader-text">Search Members</span>
    <input type="text" name="members_search" id="members_search" placeholder="Search Members..." />
</label>

Going to commit the latter.

r-a-y commented 5 years ago

As per commit 57b90cc, this is fixed in 1.1.x branch.