szurubooru/client/html/posts_header.tpl
rr- d5e197e6ea client/general: add empty href for link buttons
In e464e69 I removed href='#' but I noticed that it broke some things.
Readding href serves two purposes:

- it makes links reachable with Tab key
- it makes links clickable with Enter key

The alternative to this approach was to introduce [tabindex] and [role]
attributes. But not only using tabindex=0 with <a/> is questionable,
it'd require adding a keyboard handler that'd intercept space and return
key presses and simulated link clicks. Since it's best to leave this
kind of thing to the native UI, I went with readding hrefs instead. I
believe that hash hrefs, even though being a common practice, are silly,
so I decided to settle down with empty hrefs.

As a bonus, I added a snippet that prevents middle mouse clicks from
opening such links/buttons in new tabs, which was the motivation for
e464e69.
2016-08-22 01:40:30 +02:00

22 lines
1.3 KiB
Smarty

<div class='post-list-header'>
<form class='horizontal search'>
<%= ctx.makeTextInput({text: 'Search query', id: 'search-text', name: 'search-text', value: ctx.parameters.query}) %>
<input class='mousetrap' type='submit' value='Search'/>
<input data-safety=safe type='button' class='mousetrap safety safety-safe <%- ctx.settings.listPosts.safe ? '' : 'disabled' %>'/>
<input data-safety=sketchy type='button' class='mousetrap safety safety-sketchy <%- ctx.settings.listPosts.sketchy ? '' : 'disabled' %>'/>
<input data-safety=unsafe type='button' class='mousetrap safety safety-unsafe <%- ctx.settings.listPosts.unsafe ? '' : 'disabled' %>'/>
<a class='mousetrap button append' href='/help/search/posts'>Syntax help</a>
</form>
<% if (ctx.canMassTag) { %>
<form class='masstag horizontal'>
<% if (ctx.parameters.tag) { %>
<span class='append'>Tagging with:</span>
<% } else { %>
<a href class='mousetrap button append open-masstag'>Mass tag</a>
<% } %>
<%= ctx.makeTextInput({name: 'masstag', value: ctx.parameters.tag}) %>
<input class='mousetrap start-tagging' type='submit' value='Start tagging'/>
<a href class='mousetrap button append stop-tagging'>Stop tagging</a>
</form>
<% } %>
</div>