search

buddypress / next-template-packs

is this the next BuddyPress template pack?
35 stars 9 forks source link

In #subnav-filters: Remove UL wrapper around each search input and select form controls #129

Closed mercime closed 7 years ago

mercime commented 7 years ago

Per note in #117: We currently have the following markup for div#subnav-filters:

<div class="subnav-filters filters no-ajax" id="subnav-filters">
    <ul class="subnav-search clearfix">
        <li class="dir-search groups-search bp-search">
            <form action="" method="get" class="bp-dir-search-form" id="dir-groups-search-form" role="search" data-bp-search="groups">
                // content - Search form label, input, and button
            </form>
        </li>
    </ul>       
    <ul id="dir-filters" class="component-filters clearfix">
        <li id="groups-order-select" class="last filter">
            <div class="select-wrap">
                // content - Select box and span
            </div>
        </li>
    </ul>
</div>

The unordered list markup for each form controls is read by screen readers as (with some differences in naming lists for every screen reader):

list item 1
list item Search Groups ellipsis
// content addressed in upcoming ticket
list item end
list item 1
list item Order by: ...
// content addressed in upcoming ticket
list item end

There's only one item listed in each of the two lists in #subnav-filters, so let's remove the extra noise. Fortunately, <div>s and <span>s are not read by screen readers except those with ARIA roles/landmarks. Alternative wrapper:

<div class="subnav-filters filters no-ajax" id="subnav-filters">
    <div class="dir-search-wrap">
        // Search form content
    </div>
    <div class="select-wrap">
        // Select content
    </div>
</div>
hnla commented 7 years ago

There is also a second item in the first up so in some senses this is a list as we have a search element and feed link.

Unpicking this has to be done through three points index files, search include and filters include, suggests really that the index file markup would be better moved to it's own include really to enable work on one single file.

One thing I'm worried about is losing semantic markup e.g a list over simply aggregating non-semantic elements 'divs' 'spans' however going to try unpicking this and creating a new include file to handle all uses of thse elements.

hnla commented 7 years ago

Tentatively closing as think this is dealt with, but slightly confusing so may need to re-open.