Fix small accessibility and design issues

Author: albinazs

bakerydemo/base/templatetags/navigation_tags.py

@@ -14,14 +14,6 @@ def get_site_root(context):
     # attribute 'get_children')
     return Site.find_for_request(context["request"]).root_page
 
-
-def has_menu_children(page):
-    # This is used by the top_menu property
-    # get_children is a Treebeard API thing
-    # https://tabo.pe/projects/django-treebeard/docs/4.0.1/api.html
-    return page.get_children().live().in_menu().exists()
-
-
 def has_children(page):
     # Generically allow index pages to list their children
     return page.get_children().live().exists()
@@ -33,13 +25,10 @@ def is_active(page, current_page):
 
 
 # Retrieves the top menu items - the immediate children of the parent page
-# The has_menu_children method is necessary because the Foundation menu requires
-# a dropdown class to be applied to a parent
 @register.inclusion_tag("tags/top_menu.html", takes_context=True)
 def top_menu(context, parent, calling_page=None):
     menuitems = parent.get_children().live().in_menu()
     for menuitem in menuitems:
-        menuitem.show_dropdown = has_menu_children(menuitem)
         # We don't directly check if calling_page is None since the template
         # engine can pass an empty string to calling_page
         # if the variable passed as calling_page does not exist.
@@ -55,31 +44,6 @@ def top_menu(context, parent, calling_page=None):
         "request": context["request"],
     }
 
-
-# Retrieves the children of the top menu items for the drop downs
-@register.inclusion_tag("tags/top_menu_children.html", takes_context=True)
-def top_menu_children(context, parent, calling_page=None):
-    menuitems_children = parent.get_children()
-    menuitems_children = menuitems_children.live().in_menu()
-    for menuitem in menuitems_children:
-        menuitem.has_dropdown = has_menu_children(menuitem)
-        # We don't directly check if calling_page is None since the template
-        # engine can pass an empty string to calling_page
-        # if the variable passed as calling_page does not exist.
-        menuitem.active = (
-            calling_page.url_path.startswith(menuitem.url_path)
-            if calling_page
-            else False
-        )
-        menuitem.children = menuitem.get_children().live().in_menu()
-    return {
-        "parent": parent,
-        "menuitems_children": menuitems_children,
-        # required by the pageurl tag that we want to use within this template
-        "request": context["request"],
-    }
-
-
 @register.inclusion_tag("tags/breadcrumbs.html", takes_context=True)
 def breadcrumbs(context):
     self = context.get("self")

bakerydemo/static/css/main.css

@@ -252,6 +252,11 @@ figure img {
   height: auto;
 }
 
+/* Overriding Bootstrap's default caption styles */
+caption {
+  color: var(--dark);
+}
+
 /* Generic detail page styles */
 .intro {
   font-family: var(--font--secondary);
@@ -403,7 +408,7 @@ blockquote .attribute-name {
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.block-paragraph_block a {
+.block-paragraph_block a, .block-ingredients_list a {
   text-decoration: underline;
 }
 
@@ -1756,7 +1761,7 @@ input[type='radio'] {
 }
 
 .picture-card__link:hover .picture-card__image img {
-  transform: scale(1.05);
+  transform: scale(1.00);
 }
 
 .picture-card__link:hover .picture-card__title {

bakerydemo/templates/base/form_page.html

@@ -37,7 +37,7 @@ <h1 class="index-header__title">{{ page.title }}</h1>
                     {% endif %}
 
                     {% for field in form %}
-                        <div class="form-page__field" aria-required={% if field.field.required %}"true"{% else %}"false"{% endif %}>
+                        <div class="form-page__field">
 
                             {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}
 

bakerydemo/templates/includes/card/listing-card.html

@@ -13,13 +13,13 @@ <h3 class="listing-card__title">{{ page.title }}</h3>
                 <table class="listing-card__meta">
                     {% if page.origin %}
                         <tr>
-                            <td class="listing-card__meta-category">Origin</td>
+                            <th scope="row" class="listing-card__meta-category">Origin</th>
                             <td class="listing-card__meta-content">{{ page.origin }}</td>
                         </tr>
                     {% endif %}
                     {% if page.bread_type %}
                         <tr>
-                            <td class="listing-card__meta-category">Type</td>
+                            <th scope="row" class="listing-card__meta-category">Type</td>
                             <td class="listing-card__meta-content">{{ page.bread_type }}</td>
                         </tr>
                     {% endif %}

bakerydemo/templates/includes/footer.html

@@ -15,8 +15,8 @@
                         {% endif %}
                         {% if twitter_url %}
                             <li class="footer__icon">
-                                <a href="{{ twitter_url }}" target="_blank" rel="noreferrer" aria-label="Wagtail's official Twitter account">
-                                    <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+                                <a href="{{ twitter_url }}" target="_blank" rel="noreferrer" aria-label="Wagtail's official X account">
+                                    <svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                                 </a>
                             </li>
                         {% endif %}

bakerydemo/templates/locations/location_page.html

@@ -24,18 +24,18 @@
                 <div class="col-md-4 col-md-offset-1">
                     <div class="row">
                         <div class="bread-detail__meta">
-                            <p class="location__meta-title">Operating Status</p>
+                            <h2 class="location__meta-title">Operating Status</h2>
                             {% if page.is_open %}
                                 This location is currently open.
                             {% else %}
                                 Sorry, this location is currently closed.
                             {% endif %}
 
-                            <p class="location__meta-title">Address</p>
+                            <h2 class="location__meta-title">Address</h2>
                             <address>{{ page.address|linebreaks }}</address>
 
                             {% if page.operating_hours %}
-                                <p class="location__meta-title">Opening hours</p>
+                                <h2 class="location__meta-title">Opening hours</h2>
                                 {% for hours in page.operating_hours %}
                                     <time itemprop="openingHours" datetime="{{ hours }}" class="location__time">
                                         <span class="location__day">{{ hours.day }}</span>:

bakerydemo/templates/recipes/recipe_index_page.html

@@ -2,6 +2,8 @@
 {% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
+    {% include "base/include/header-index.html" %}
+
     <div class="container">
         <div class="blog-list">
             {% if recipes %}

bakerydemo/templates/tags/top_menu.html

@@ -2,13 +2,7 @@
 {% get_site_root as site_root %}
 
 {% for menuitem in menuitems %}
-    <li class="presentation {{ menuitem.title|lower|cut:" " }}{% if menuitem.active %} active{% endif %}{% if menuitem.show_dropdown %} has-submenu{% endif %}">
-        {% if menuitem.show_dropdown %}
-            <a href="{% pageurl menuitem %}" class="allow-toggle">{{ menuitem.title }} <span><a class="caret-custom dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a></span></a>
-            {% top_menu_children parent=menuitem %}
-            {# Used to display child menu items #}
-        {% else %}
-            <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
-        {% endif %}
+    <li class="presentation {{ menuitem.title|lower|cut:" " }}{% if menuitem.active %} active{% endif %}">
+        <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
     </li>
 {% endfor %}