Issue 6003 - Better handling of no-content-for-platform-message on help.eyeo.com

templates/article.tmpl

 {% extends "templates/minimal" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
 <nav aria-label="{{ "Breadcrumb" | translate("breadcrumb-label", "Label") }}" class="breadcrumb">
   <ol class="container large-desktop-width clearfix" itemscope itemtype="http://schema.org/BreadcrumbList">
     <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
       <a class="has-pre-icon" itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ product.slug }}">
         <span class="pre-icon" style="{{ get_inline_bg('logo-'+product_id) }}"></span>
@@ skipping 18 matching lines @@
           <h1 class="has-pre-icon">
             <span class="pre-icon" style="{{ get_inline_bg('logo-'+product_id) }}"></span>
             {{ title | translate( get_page_name(page) + "-title", "Article title") }}
           </h1>
         </header>
 
         {% if hide_browser_selector is not defined %}
         <div class="article-browser-selector">
           <? include browser-select ?>
         </div>
+
+        <div id="no-content-for-platform-message" class="content" aria-hidden="true" hidden>

[juliandoucette, 2017/11/15 13:27:45]

I think that aria-hidden and hidden is redundant.

Source:
https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hi...

[ire, 2017/11/15 16:57:30]

You're right. I wasn't sure about this myself. Thanks for sharing the article!

Done.

+          <p>{{ "Unfortunately, there is no content specific to your current browser. Please choose a different browser from the list below:" | translate("no-content-for-platform-message", "paragraph") }}</p>

[juliandoucette, 2017/11/15 13:27:45]

NIT: This message doesn't make sense when you select a browser that there is no
content for

[ire, 2017/11/15 16:57:30]

Why doesn't it make sense? And do you have a suggestion for something different?

[juliandoucette, 2017/11/15 18:03:33]

"Your current browser" means "the browser that you are using" AFAICT. Which
doesn't make sense (is incorrect) if the selected browser is not the browser
that you are using.

Furthermore, this statement is ambiguous because "content" is general and is not
related to the subject/question in this statement. e.g. "there is no content
specific to your context" vs "there is no *answer* to *your question* in/for
*your context*" ... if you know what I mean?
I hate writing... D: 

I can suggest several elements:

1. Oops sorry
2. We don't have (an answer | a tutorial) (to $THIS_QUESTION | for
$THIS_SUBJECT) for $THIS_BROWSER
3. Point to browsers that we do have (an answer | a tutorial) for
4. Point at Popular Topics section (may not be necessary)
5. Point at Still looking for help section (may not be necessary)

"Oops! There is no tutorial for the subject and browser that you have selected.
Please find a list of browsers that this tutorial is available for below. "

[ire, 2017/11/27 18:26:45]

Ack. I understand.
I like your suggestions. I think we should move this discussion outside this
review (back to the issue) so we can get other feedback on this as well. I'll
copy this discussion over there now

+          <ul>
+            {% for browser in browsers %}
+            <li class="{{ browser.id }}">
+              <button type="button" class="btn-link">
+                {{ browser.name | translate(browser.id + "-name") }}
+              </button>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
         {% endif %}
 
         <div class="article-body content">
             {{ body | safe }}
         </div>
       </article>
     </div>
     <aside class="section column one-third">
       <? include product-topics-accordion ?>
     </aside>
   </div>
 </main>
-
-<script id="no-content-for-platform-message" type="text/template">
-  <p>{{ "Unfortunately, there is no content specific for your current browser. Please use the dropdown menu above to choose a different browser." | translate("no-content-for-platform-message", "paragraph") }}</p>
-</script>
 {% endblock %}
 
 {% block footer %}
 <? include contact ?>
 {% endblock %}
 
 {% block scripts %}
 <script src="/js/vendor/bowser.js"></script>
 {% endblock %}