bkardell · September 18, 2015 22:19
diff --git a/index.html b/index.html
  <section>
    <h1>What's this?</h1>
    <p>"Actionable" elements (ie, elements like <code>&lt;a&gt;,&lt;button&gt;,&lt;input type="button"&gt;</code>) have no ideal patterns around how you manage tooltips in a way that it simultaneously accessible and touch friendly.  It's easy enough to add <code>aria-describedby</code> and some CSS involving <code>:hover, :focus</code> to most elements, but these elements are different: clicking them doesn't just set focus, it activates some behavior.  This means that there is no way for users of touch-based devices to get the same sort of information.  You can add a help button but this easily leaves blind users in the lurch because the button itself isn't described and they likely have no idea that the _next_ element contains help for this one.  In a word, this situation kind of sucks.  A user might needs to know what that button does before they want to click it, but we cannot dedicated a major portion of the UI to always showing a descrition of it.  Figuring out an approach that works everywhere is kind of hard, so what we've done here is extracted a simple pattern and wrapped a custom element around it...</p>
    <contextual-actionable data-placement="bottom">
      <button>Test EBR</button>
      <contextual-message>Lauches a national EBR test "This is a test of the Emergency Broadcast System..."
      </contextual-message>
 </contextual-actionable>
 <hr>
    <h2>Source...</h2>

    <code class="source"><pre>&lt!-- polyfill of custom elements API and our contextual elements --&gt
 &lt;script src="https://rawgit.com/bkardell/common-panel/gh-pages/prototype/custom-elements.js"&gt;&lt;/script&gt;
 &lt;script src="https://rawgit.com/bkardell/contextual-elements/master/contextual.js"&gt;&lt;/script&gt;

 &lt!-- wrap around an actionable element and provide the message - it's progressively enhanced &gt
 &lt;contextual-actionable&gt;
    &lt;button&gt;Test EBR&lt;/button&gt;
    &lt;contextual-message&gt;Lauches a national EBR test "This is a test of the Emergency Broadcast System..."&lt;/contextual-message&gt;
 &lt;/contextual-actionable&gt;
 </pre></code>
  </section>

diff --git a/scripts b/scripts
 <script src="https://rawgit.com/bkardell/common-panel/gh-pages/prototype/custom-elements.js"></script>
 <script src="https://rawgit.com/bkardell/contextual-elements/master/contextual.js"></script>
diff --git a/style.css b/style.css
 code {
   color: maroon;
   font-weight: bold;
 }

 code.source {
   display: block;
   padding-left: 1em;
 }
diff --git a/vNGPwP.markdown b/vNGPwP.markdown
	<section>
	<h1>What's this?</h1>
	<p>"Actionable" elements (ie, elements like <code><a>,<button>,<input type="button"></code>) have no ideal patterns around how you manage tooltips in a way that it simultaneously accessible and touch friendly. It's easy enough to add <code>aria-describedby</code> and some CSS involving <code>:hover, :focus</code> to most elements, but these elements are different: clicking them doesn't just set focus, it activates some behavior. This means that there is no way for users of touch-based devices to get the same sort of information. You can add a help button but this easily leaves blind users in the lurch because the button itself isn't described and they likely have no idea that the _next_ element contains help for this one. In a word, this situation kind of sucks. A user might needs to know what that button does before they want to click it, but we cannot dedicated a major portion of the UI to always showing a descrition of it. Figuring out an approach that works everywhere is kind of hard, so what we've done here is extracted a simple pattern and wrapped a custom element around it...</p>
	<contextual-actionable data-placement="bottom">
	<button>Test EBR</button>
	<contextual-message>Lauches a national EBR test "This is a test of the Emergency Broadcast System..."
	</contextual-message>
	</contextual-actionable>
	<hr>
	<h2>Source...</h2>

	<code class="source"><pre>&lt!-- polyfill of custom elements API and our contextual elements --&gt
	<script src="https://rawgit.com/bkardell/common-panel/gh-pages/prototype/custom-elements.js"></script>
	<script src="https://rawgit.com/bkardell/contextual-elements/master/contextual.js"></script>

	&lt!-- wrap around an actionable element and provide the message - it's progressively enhanced &gt
	<contextual-actionable>
	<button>Test EBR</button>
	<contextual-message>Lauches a national EBR test "This is a test of the Emergency Broadcast System..."</contextual-message>
	</contextual-actionable>
	</pre></code>
	</section>
	code {
	color: maroon;
	font-weight: bold;
	}

	code.source {
	display: block;
	padding-left: 1em;
	}