Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mercime opened this issue Apr 18, 2017 · 2 comments
Assignees

Comments

@mercime
Copy link
Collaborator

mercime commented Apr 18, 2017

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
Copy link
Collaborator

hnla commented Apr 18, 2017

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 hnla self-assigned this Apr 18, 2017
@hnla hnla added this to In Progress in General Tasks Apr 18, 2017
hnla added a commit that referenced this issue Apr 18, 2017
Commit removes UL list markup in favour of div & updates styles.

See #129
@hnla
Copy link
Collaborator

hnla commented Aug 16, 2017

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

@hnla hnla closed this as completed Aug 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
General Tasks
In Progress
Development

No branches or pull requests

2 participants