From d807cbd1fc874b2111c93f7eb18b0d7aa64f0ad2 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sat, 21 Mar 2020 17:11:06 +0100
Subject: [PATCH] Updated migration guide for templates

---
 docs/releases/5.md | 69 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/docs/releases/5.md b/docs/releases/5.md
index c4099a7a7..c5d2f3774 100644
--- a/docs/releases/5.md
+++ b/docs/releases/5.md
@@ -413,9 +413,10 @@ matches the new structure:
 #### `partials/footer.html`
 
 ``` diff
-@@ -7,32 +7,32 @@
+@@ -5,34 +5,34 @@
      <div class="md-footer-nav">
-       <nav class="md-footer-nav__inner md-grid">
+-      <nav class="md-footer-nav__inner md-grid">
++      <nav class="md-footer-nav__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
          {% if page.previous_page %}
 -          <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
 -            <div class="md-flex__cell md-flex__cell--shrink">
@@ -463,10 +464,11 @@ matches the new structure:
 #### `partials/header.html`
 
 ``` diff
-@@ -3,50 +3,44 @@
+@@ -2,51 +2,46 @@
+   This file was automatically generated - do not edit
  -#}
  <header class="md-header" data-md-component="header">
-   <nav class="md-header-nav md-grid">
+-  <nav class="md-header-nav md-grid">
 -    <div class="md-flex">
 -      <div class="md-flex__cell md-flex__cell--shrink">
 -        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
@@ -483,6 +485,7 @@ matches the new structure:
 -      <div class="md-flex__cell md-flex__cell--stretch">
 -        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
 -          {% if config.site_name == page.title %}
++  <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
 +    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
 +      {% if config.theme.logo %}
 +        <img src="{{ config.theme.logo | url }}" alt="logo">
@@ -598,7 +601,7 @@ matches the new structure:
 +      </span>
      </label>
 -    <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
-+    <nav class="md-nav" data-md-level="{{ level }}">
++    <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
        <label class="md-nav__title" for="{{ path }}">
 +        <span class="md-nav__icon md-icon">
 +          {% include ".icons/material/arrow-left.svg" %}
@@ -607,7 +610,7 @@ matches the new structure:
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
 @@ -39,6 +45,9 @@
-     {% if toc_ | first is defined %}
+     {% if toc | first is defined %}
        <label class="md-nav__link md-nav__link--active" for="__toc">
          {{ nav_item.title }}
 +        <span class="md-nav__icon md-icon">
@@ -621,21 +624,24 @@ matches the new structure:
 #### `partials/nav.html`
 
 ``` diff
-@@ -2,12 +2,12 @@
+@@ -1,13 +1,14 @@
+ {#-
    This file was automatically generated - do not edit
  -#}
- <nav class="md-nav md-nav--primary" data-md-level="0">
+-<nav class="md-nav md-nav--primary" data-md-level="0">
 -  <label class="md-nav__title md-nav__title--site" for="__drawer">
 -    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
 -      {% if config.theme.logo.icon %}
 -        <i class="md-icon">{{ config.theme.logo.icon }}</i>
++<nav class="md-nav md-nav--primary" aria-label="{{ lang.t('nav.title') }}" data-md-level="0">
 +  <label class="md-nav__title" for="__drawer">
 +    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-nav__button md-logo">
 +      {% if config.theme.logo %}
 +        <img src="{{ config.theme.logo | url }}" alt="logo">
        {% else %}
 -        <img alt="logo" src="{{ config.theme.logo | url }}" width="48" height="48">
-+        {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
++        {% set icon = config.theme.icon.logo or "material/library" %}
++        {% include ".icons/" ~ icon ~ ".svg" %}
        {% endif %}
      </a>
      {{ config.site_name }}
@@ -648,15 +654,15 @@ matches the new structure:
    <label class="md-search__overlay" for="__search"></label>
    <div class="md-search__inner" role="search">
      <form class="md-search__form" name="search">
--      <input type="text" class="md-search__input" aria-label="search" name="query" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
-+      <input type="text" class="md-search__input" name="query" aria-label="search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
+-      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
++      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active">
        <label class="md-search__icon md-icon" for="__search">
 +        {% include ".icons/material/magnify.svg" %}
 +        {% include ".icons/material/arrow-left.svg" %}
        </label>
 -      <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
 -        &#xE5CD;
-+      <button type="reset" class="md-search__icon md-icon" data-md-component="search-reset" tabindex="-1">
++      <button type="reset" class="md-search__icon md-icon" aria-label="{{ lang.t('search.reset') }}" data-md-component="search-reset" tabindex="-1">
 +        {% include ".icons/material/close.svg" %}
        </button>
      </form>
@@ -732,7 +738,7 @@ matches the new structure:
 #### `partials/source.html`
 
 ``` diff
-@@ -2,24 +2,10 @@
+@@ -2,24 +2,11 @@
    This file was automatically generated - do not edit
  -#}
  {% import "partials/language.html" as lang with context %}
@@ -756,7 +762,8 @@ matches the new structure:
 -  {% endif %}
 +<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
 +  <div class="md-source__icon md-icon">
-+    {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
++    {% set icon = config.theme.icon.repo or "fontawesome/brands/git-alt" %}
++    {% include ".icons/" ~ icon ~ ".svg" %}
 +  </div>
    <div class="md-source__repository">
      {{ config.repo_name }}
@@ -777,11 +784,43 @@ matches the new structure:
        <a href="{{ nav_item.url | url }}" class="md-tabs__link md-tabs__link--active">
 ```
 
+#### `partials/tabs.html`
+
+``` diff
+@@ -5,7 +5,7 @@
+ {% if page.ancestors | length > 0 %}
+   {% set class = "md-tabs md-tabs--active" %}
+ {% endif %}
+-<nav class="{{ class }}" data-md-component="tabs">
++<nav class="{{ class }}" aria-label="{{ lang.t('tabs.title') }}" data-md-component="tabs">
+   <div class="md-tabs__inner md-grid">
+     <ul class="md-tabs__list">
+       {% for nav_item in nav %}
+```
+
+#### `partials/toc-item.html`
+
+``` diff
+@@ -6,7 +6,7 @@
+     {{ toc_item.title }}
+   </a>
+   {% if toc_item.children %}
+-    <nav class="md-nav">
++    <nav class="md-nav" aria-label="{{ toc_item.title }}">
+       <ul class="md-nav__list">
+         {% for toc_item in toc_item.children %}
+           {% include "partials/toc-item.html" %}
+```
+
 #### `partials/toc.html`
 
 ``` diff
-@@ -8,29 +8,16 @@
+@@ -2,35 +2,22 @@
+   This file was automatically generated - do not edit
  -#}
+ {% import "partials/language.html" as lang with context %}
+-<nav class="md-nav md-nav--secondary">
++<nav class="md-nav md-nav--secondary" aria-label="{{ lang.t('toc.title') }}">
    {% endif %}
    {% if toc | first is defined %}
      <label class="md-nav__title" for="__toc">