Issue 5691 - Create Breadcrumbs Component for help.eyeo.com

templates/article.tmpl

 {% extends "templates/default" %}
 
 {% set product = products[product_id] %}
 
 {% block body %}
-[Breadcrumbs]
+<nav aria-label="{{ "Breadcrumb" | translate("breadcrumb-label", "Label") }}" class="breadcrumb">

[juliandoucette, 2017/10/24 09:51:13]

NIT: "Breadcrumb" is singular but you are referring to a list of 0 to many
breadcrumbs. 

Suggest: Something more friendly e.g. "You are here"

Acknowledging that you probably got this idea from the w3 ARIA example and that
the logic on that page (labeling the type of navigation) makes sense. Please
consider my suggestion and do whatever you think is right. I think that both of
these options are good.

[ire, 2017/10/25 10:00:06]

Yes I actually had it as "Breadcrumbs" before, but I changed it because of the
example. 

I would prefer to follow the example in this case.

[juliandoucette, 2017/10/25 12:15:03]

Acknowledged.

+  <ol class="container clearfix" itemscope itemtype="http://schema.org/BreadcrumbList">
+    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+      <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ product.slug }}">

[juliandoucette, 2017/10/24 09:51:14]

Suggest: http://schema.org/Product

[ire, 2017/10/25 10:00:06]

The ABP Help Center Home isn't really a product. I think that scheme would be
more suitable for linking to abp.org, not help.eyeo.com/abp

[juliandoucette, 2017/10/25 12:15:03]

Acknowledged.

+        <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate(product_id+"-logo-alt", "Image alt text") }}">

[juliandoucette, 2017/10/24 09:51:14]

NIT: I don't know why extra spaces with text-decoration bother me so much. I
want to suggest that you place this image via CSS [to avoid this issue, because
the label alone is probably enough]. But I acknowledge that I'm probably being
too picky. You could address this separately and/or not at all.

[ire, 2017/10/25 10:00:06]

I'll address this in this issue with the alignment of these icons
https://issues.adblockplus.org/ticket/5848

[juliandoucette, 2017/10/25 12:15:03]

Acknowledged.

+        <span itemprop="name">{{ product.full_name | translate(product_id+"-name", "Product name") }}</span>
+      </a>
+      <meta itemprop="position" content="1" />
+    </li>
+    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+      <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ page }}" aria-current="page">
+        <span itemprop="name">{{ title | translate(get_page_name(page) + "-title", "Article title") }}</span>
+      </a>
+      <meta itemprop="position" content="2" />
+    </li>
+  </ol>
+</nav>
 
 <main id="main" class="container clearfix">
   <article class="article card {{ product_id }}-card section column two-thirds">
       <h1 class="article-heading">
         <img class="heading-icon" src="/img/png/logo-{{ product_id }}.png" srcset="/img/svg/logo-{{ product_id }}.svg 2x" alt="{{ product.full_name+" Logo" | translate( product_id+"-logo-alt", "Image alt text") }}">
 
         {{ title | translate( get_page_name(page) + "-title", "Article title") }}
       </h1>
       
       {% if hide_browser_selector is not defined %}
       <div class="article-browser-selector">
         [Browser selector]
       </div>
       {% endif %}
 
       <div class="article-body content">
           {{ body | safe }}
       </div>
   </article>
   <aside class="section column one-third">
     <? include product-topics-accordion ?>
   </aside>
 </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 %}