a11y: #4225 olh nav add aria markup to dropdowns

Author: StephDriver

src/themes/OLH/templates/core/nav.html

@@ -21,8 +21,14 @@
             {% for item in navigation_items %}
                 {% if item.has_sub_nav %}
                     <li class="is-dropdown-submenu-parent">
-                        <a href="#" data-options="is_hover:true; hover_timeout:5000">{{ item.link_name }}</a>
-                        <ul class="menu vertical medium-horizontal">
+                        <a href="#" data-options="is_hover:true; hover_timeout:5000"
+                            role="button" 
+                            aria-expanded="true"
+                            aria-controls="menu-nav-item-{{ item.counter }}"
+                            >
+                            {{ item.link_name }}
+                        </a>
+                        <ul class="menu vertical medium-horizontal" id="menu-nav-item-{{ item.counter }}">
                             {% if item.link %}
                                 <li>
                                     <a href="{{ item.url }}">{{ item.link_name }}</a>
@@ -57,8 +63,14 @@
             {% if journal_settings.general.enable_editorial_display %}
                 {% if journal_settings.general.multi_page_editorial %}
                     <li class="is-dropdown-submenu-parent">
-                        <a href="#" data-options="is_hover:true; hover_timeout:5000">{{ journal_settings.styling.editorial_group_page_name }}</a>
-                        <ul class="menu vertical medium-horizontal">
+                        <a href="#" data-options="is_hover:true; hover_timeout:5000"
+                            role="button" 
+                            aria-expanded="true"
+                            aria-controls="menu-nav-journal"
+                            >
+                            {{ journal_settings.styling.editorial_group_page_name }}
+                        </a>
+                        <ul class="menu vertical medium-horizontal" id="menu-nav-journal">
                             {% for group in request.journal.editorial_groups %}
                                 <li>
                                     <a href="{% url 'editorial_team_group' group.pk %}">{{ group.name }}</a>
@@ -105,8 +117,14 @@
             {% endif %}
 
             <li class="is-dropdown-submenu-parent show-for-small-only">
-                <a href="#" data-options="is_hover:true; hover_timeout:5000">{% trans 'Account' %}</a>
-                <ul class="menu vertical medium-horizontal">
+                <a href="#" data-options="is_hover:true; hover_timeout:5000"
+                    role="button" 
+                    aria-expanded="true"
+                    aria-controls="menu-nav-account"
+                    >
+                    {% trans 'Account' %}
+                </a>
+                <ul class="menu vertical medium-horizontal" id="menu-nav-account">
                     {% if request.user.is_authenticated %}
                         <li>
                             <a href="{% url 'core_dashboard' %}">{% trans 'Dashboard' %}</a>