d5e197e6ea
Ine464e69I 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 fore464e69.
31 lines
1,004 B
Smarty
31 lines
1,004 B
Smarty
<div class='tabs'>
|
|
<form>
|
|
<div class='tabs-wrapper'><!--
|
|
--><div class='preview tab'><!--
|
|
--><div class='comment-content-wrapper'><!--
|
|
--><div class='comment-content'><!--
|
|
--><%= ctx.makeMarkdown(ctx.comment.text) %><!--
|
|
--></div><!--
|
|
--></div><!--
|
|
--></div><!--
|
|
|
|
--><div class='edit tab'><!--
|
|
--><textarea required minlength=1><%- ctx.comment.text %></textarea><!--
|
|
--></div><!--
|
|
--></div>
|
|
|
|
<nav class='buttons'>
|
|
<ul>
|
|
<li class='preview'><a href>Preview</a></li>
|
|
<li class='edit'><a href>Edit</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav class='actions'>
|
|
<input type='submit' class='save' value='Save'/>
|
|
<input type='button' class='cancel discourage' value='Cancel'/>
|
|
</nav>
|
|
</form>
|
|
|
|
<div class='messages'></div>
|
|
</div>
|