Skip to content

Instantly share code, notes, and snippets.

@ntwb

ntwb/bbpress-proposals.html Secret

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ntwb/c8f99df8a714ed028e2d to your computer and use it in GitHub Desktop.
Save ntwb/c8f99df8a714ed028e2d to your computer and use it in GitHub Desktop.
Download ZIP
Via Karl Groves of Tenon-IO - This is just feedback for the initial view of the forum with no topics.
Raw
bbpress-proposals.html
<!--//
General feedback:
* Kill accesskey. Loads of trouble for little-to-no benefit
* Eliminate tabindex in any case where it is > 0
* Lose the title attributes
//-->
<div id="bbpress-forums">
<!--//
Suggested breadcrumb markup
Note: The stuff in the breadcrumb separator span should be CSS generated content. (<span class="bbp-breadcrumb-sep">›</span>)
In the following model it'd be:
.bbp-breadcrumb ul li a::after{ content: ' ›'; }
//-->
<div class="bbp-breadcrumb">
<ul>
<li><a href="http://wp-test:8888/" class="bbp-breadcrumb-home">Home</a></li>
<li><a href="http://wp-test:8888/?post_type=forum" class="bbp-breadcrumb-root">Forums</a></li>
<li><span class="bbp-breadcrumb-current">Developers – General</span></li>
</ul>
</div>
<span id="subscription-toggle">
<span id="subscribe-5">
<a href="http://wp-test:8888/?forum=developers-general&amp;action=bbp_subscribe&amp;forum_id=5&amp;_wpnonce=9014a5c869"
class="subscription-toggle" data-forum="5" rel="nofollow">Subscribe</a></span></span>
<div class="bbp-template-notice info"><p class="bbp-forum-description">This forum is empty.</p></div>
<div class="bbp-template-notice">
<p>Oh bother! No topics were found here!</p>
</div>
<div id="new-topic-0" class="bbp-topic-form">
<form id="new-post" name="new-post" method="post" action="http://wp-test:8888/?forum=developers-general"
_lpchecked="1">
<!--//
Fieldset is generally best reserved for cases where you need to disambiguate sets of similarly named
fields and/ or where clarification of the label is need. Perfect use cases would be shipping address vs. billing address
Screen readers usually read the legend before each label. So, for instance:
"Create New Topic in “Developers – General” [pause] Topic Title (Maximum Length: 80)"
This is pretty verbose and, in this case, not necessary, because it is pretty obvious what the purpose of the form is.
A heading is better:
//-->
<h2>Create New Topic in “Developers – General”</h2>
<div class="bbp-template-notice">
<p>Your account has the ability to post unrestricted HTML content.</p>
</div>
<!--//
Validation error messaging
The use of a list allows the user to know how many errors were found
Be sure to shift focus directly to this div
$('.error:first').focus();
//-->
<div class="bbp-template-notice error" role="alert" tabindex="-1">
<ul>
<li><strong>ERROR</strong>: Your topic needs a title.</li>
<li><strong>ERROR</strong>: Your topic cannot be empty.</li>
</ul>
</div>
<div>
<p>
<label for="bbp_topic_title">Topic Title (Maximum Length: 80):</label><br>
<input type="text" id="bbp_topic_title" value="" size="40" name="bbp_topic_title"
maxlength="80">
</p>
<div class="bbp-the-content-wrapper">
<div id="wp-bbp_topic_content-wrap" class="wp-core-ui wp-editor-wrap html-active">
<link rel="stylesheet" id="dashicons-css"
href="http://wp-test:8888/wp-includes/css/dashicons.min.css?ver=3.9.1" type="text/css"
media="all">
<link rel="stylesheet" id="editor-buttons-css"
href="http://wp-test:8888/wp-includes/css/editor.min.css?ver=3.9.1" type="text/css"
media="all">
<div id="wp-bbp_topic_content-editor-container" class="wp-editor-container">
<div id="qt_bbp_topic_content_toolbar" class="quicktags-toolbar">
<!--//
Note the use of aria-label below, to add better labels
The accessible name for input[type=button] comes from the 'value' attribute.
So value="b" is literally announced as 'b button'
Adding aria-label allows the label to be clear
//-->
<input type="button"
id="qt_bbp_topic_content_strong"
class="ed_button button button-small"
value="b"
aria-label="Bold">
<input
type="button"
id="qt_bbp_topic_content_em"
class="ed_button button button-small"
value="i"
aria-label="Italic">
<input type="button"
id="qt_bbp_topic_content_link"
class="ed_button button button-small"
value="link"
aria-label="Link">
<input
type="button"
id="qt_bbp_topic_content_block"
class="ed_button button button-small"
value="b-quote"
aria-label="Quote">
<input
type="button"
id="qt_bbp_topic_content_del"
class="ed_button button button-small"
value="del"
aria-label="Strike">
<input type="button"
id="qt_bbp_topic_content_img"
class="ed_button button button-small"
value="img"
aria-label="Image">
<input
type="button"
id="qt_bbp_topic_content_ul"
class="ed_button button button-small"
value="ul"
aria-label="Bulleted List">
<input type="button"
id="qt_bbp_topic_content_ol"
class="ed_button button button-small"
value="ol"
aria-label="Numbered List">
<input
type="button"
id="qt_bbp_topic_content_li"
class="ed_button button button-small"
value="li"
aria-label="List Item">
<input type="button"
id="qt_bbp_topic_content_code"
class="ed_button button button-small"
value="code"
aria-label="Code">
<input
type="button"
id="qt_bbp_topic_content_close"
class="ed_button button button-small"
value="close tags"
aria-label="Close Tags">
</div>
<!--// Aria-label used here, too. No real need for a visual label //-->
<textarea class="bbp-the-content wp-editor-area" rows="12" cols="40"
name="bbp_topic_content" id="bbp_topic_content"
aria-label="Topic Content"></textarea>
</div>
</div>
</div>
<p>
<label for="bbp_topic_tags">Topic Tags:</label><br>
<input type="text" value="" size="40" name="bbp_topic_tags" id="bbp_topic_tags">
</p>
<!--//
Quite likely a bug, the label[for] did not match the select[id]
the mismatch means AT won't read it
fixed, below
//-->
<p>
<label for="bbp_stick_topic">Topic Type:</label><br>
<select name="bbp_stick_topic" id="bbp_stick_topic">
<option value="unstick">Normal</option>
<option value="stick">Sticky</option>
<option value="super">Super Sticky</option>
</select>
</p>
<!--//
Quite likely a bug, the label[for] did not match the select[id]
the mismatch means AT won't read it
fixed, below
//-->
<p>
<label for="bbp_topic_status">Topic Status:</label><br>
<select name="bbp_topic_status" id="bbp_topic_status">
<option value="publish" selected="selected">Open</option>
<option value="closed">Closed</option>
<option value="spam">Spam</option>
<option value="trash">Trash</option>
<option value="pending">Pending</option>
</select>
</p>
<p>
<input name="bbp_topic_subscription" id="bbp_topic_subscription" type="checkbox"
value="bbp_subscribe">
<label for="bbp_topic_subscription">Notify me of follow-up replies via email</label>
</p>
<div class="bbp-submit-wrapper">
<button type="submit" id="bbp_topic_submit" name="bbp_topic_submit"
class="button submit">Submit
</button>
</div>
</div>
<!--// I trimmed out the hidden fields, just for brevity //-->
</form>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment