Remove menu role from page edit action menu (#5354, #5327)

CHANGELOG.txt

@@ -35,6 +35,7 @@ Changelog
  * Fix: Clear pending AJAX request if error occurs on page chooser (Matt Westcott)
  * Fix: Prevent text from overlapping in focal point editing UI (Beth Menzies)
  * Fix: Screen readers now announce "Dashboard" for the main nav’s logo link instead of Wagtail’s version number (Thibaud Colas)
+ * Fix: Screen readers now treat page-level action dropdowns as navigation instead of menus (Helen Chapman)
 
 
 2.5.1 (07.05.2019)

docs/releases/2.6.rst

@@ -48,6 +48,7 @@ Bug fixes
  * Clear pending AJAX request if error occurs on page chooser (Matt Westcott)
  * Prevent text from overlapping in focal point editing UI (Beth Menzies)
  * Screen readers now announce "Dashboard" for the main nav’s logo link instead of Wagtail’s version number (Thibaud Colas)
+ * Screen readers now treat page-level action dropdowns as navigation instead of menus (Helen Chapman)
 
 
 Upgrade considerations

wagtail/admin/templates/wagtailadmin/pages/action_menu/menu.html

@@ -1,6 +1,6 @@
 {% if show_menu %}
     <div class="dropdown-toggle icon icon-arrow-up"></div>
-    <ul role="menu">
+    <ul>
         {% for item in rendered_menu_items %}{{ item }}{% endfor %}
     </ul>
 {% endif %}

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -24,35 +24,37 @@
         {{ edit_handler.render_form_content }}
 
         <footer role="contentinfo">
-            <ul>
-                <li class="actions">
-                    <div class="dropdown dropup dropdown-button match-width">
-                        <button type="submit" class="button action-save button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Save draft' %}</em></button>
-                        {{ action_menu.render_html }}
-                    </div>
-                </li>
-
-                <li class="preview">
-                    {% trans 'Preview' as preview_label %}
-                    {% if preview_modes|length > 1 %}
+            <nav aria-label="{% trans 'Actions' %}">
+                <ul>
+                    <li class="actions">
                         <div class="dropdown dropup dropdown-button match-width">
-                            {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label icon=1 %}
-                            <div class="dropdown-toggle icon icon-arrow-up"></div>
-                            <ul role="menu">
-                                {% for mode_name, mode_display_name in preview_modes %}
-                                    <li>
-                                        {% include "wagtailadmin/pages/_preview_button_on_create.html" with mode=mode_name label=mode_display_name %}
-                                    </li>
-                                {% endfor %}
-                            </ul>
+                            <button type="submit" class="button action-save button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Save draft' %}</em></button>
+                            {{ action_menu.render_html }}
                         </div>
-                    {% else %}
-                        {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label icon=1 %}
-                    {% endif %}
-                </li>
-                {% block extra_footer_actions %}
-                {% endblock %}
-            </ul>
+                    </li>
+
+                    <li class="preview">
+                        {% trans 'Preview' as preview_label %}
+                        {% if preview_modes|length > 1 %}
+                            <div class="dropdown dropup dropdown-button match-width">
+                                {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label icon=1 %}
+                                <div class="dropdown-toggle icon icon-arrow-up"></div>
+                                <ul>
+                                    {% for mode_name, mode_display_name in preview_modes %}
+                                        <li>
+                                            {% include "wagtailadmin/pages/_preview_button_on_create.html" with mode=mode_name label=mode_display_name %}
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        {% else %}
+                            {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label icon=1 %}
+                        {% endif %}
+                    </li>
+                    {% block extra_footer_actions %}
+                    {% endblock %}
+                </ul>
+            </nav>
         </footer>
     </form>
 

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -35,49 +35,51 @@
         {% endif %}
 
         <footer role="contentinfo">
-            <ul>
-                <li class="actions">
-                    <div class="dropdown dropup dropdown-button match-width {% if is_revision %}warning{% endif %}">
-                        <button type="submit" class="button action-save button-longrunning {% if is_revision %}warning{% endif %}" tabindex="3" data-clicked-text="{% trans 'Saving…' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% if page.locked %}{% trans 'Page locked' %}{% else %}{% if is_revision %}{% trans 'Replace current draft' %}{% else %}{% trans 'Save draft' %}{% endif %}{% endif %}</em></button>
-
-                        {{ action_menu.render_html }}
-                    </div>
-                </li>
-
-                <li class="preview">
-                    {% trans 'Preview' as preview_label %}
-                    {% if preview_modes|length > 1 %}
-                        <div class="dropdown dropup dropdown-button match-width">
-                            {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label icon=1 %}
-                            <div class="dropdown-toggle icon icon-arrow-up"></div>
-                            <ul role="menu">
-                                {% for mode_name, mode_display_name in preview_modes %}
-                                    <li>
-                                        {% include "wagtailadmin/pages/_preview_button_on_edit.html" with mode=mode_name label=mode_display_name %}
-                                    </li>
-                                {% endfor %}
-                            </ul>
+            <nav aria-label="{% trans 'Actions' %}">
+                <ul>
+                    <li class="actions">
+                        <div class="dropdown dropup dropdown-button match-width {% if is_revision %}warning{% endif %}">
+                            <button type="submit" class="button action-save button-longrunning {% if is_revision %}warning{% endif %}" tabindex="3" data-clicked-text="{% trans 'Saving…' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% if page.locked %}{% trans 'Page locked' %}{% else %}{% if is_revision %}{% trans 'Replace current draft' %}{% else %}{% trans 'Save draft' %}{% endif %}{% endif %}</em></button>
+
+                            {{ action_menu.render_html }}
                         </div>
-                    {% else %}
-                        {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label icon=1 %}
-                    {% endif %}
-                </li>
-
-                <li class="meta">
-                    <p class="modified">
-                        {% if page.get_latest_revision %}
-                            {% blocktrans with last_mod=page.get_latest_revision.created_at %}Last modified: {{ last_mod }}{% endblocktrans %}
-                            {% if page.get_latest_revision.user %}
-                                {% blocktrans with modified_by=page.get_latest_revision.user.get_full_name|default:page.get_latest_revision.user.get_username %}by {{ modified_by }}{% endblocktrans %}
-                                <span class="avatar small"><img src="{% avatar_url page.get_latest_revision.user size=25 %}" alt="" /></span>
-                            {% endif %}
-                            <a href="{% url 'wagtailadmin_pages:revisions_index' page.id %}" class="underlined">{% trans 'Revisions' %}</a>
+                    </li>
+
+                    <li class="preview">
+                        {% trans 'Preview' as preview_label %}
+                        {% if preview_modes|length > 1 %}
+                            <div class="dropdown dropup dropdown-button match-width">
+                                {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label icon=1 %}
+                                <div class="dropdown-toggle icon icon-arrow-up"></div>
+                                <ul>
+                                    {% for mode_name, mode_display_name in preview_modes %}
+                                        <li>
+                                            {% include "wagtailadmin/pages/_preview_button_on_edit.html" with mode=mode_name label=mode_display_name %}
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        {% else %}
+                            {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label icon=1 %}
                         {% endif %}
-                    </p>
-                </li>
-                {% block extra_footer_actions %}
-                {% endblock %}
-            </ul>
+                    </li>
+
+                    <li class="meta">
+                        <p class="modified">
+                            {% if page.get_latest_revision %}
+                                {% blocktrans with last_mod=page.get_latest_revision.created_at %}Last modified: {{ last_mod }}{% endblocktrans %}
+                                {% if page.get_latest_revision.user %}
+                                    {% blocktrans with modified_by=page.get_latest_revision.user.get_full_name|default:page.get_latest_revision.user.get_username %}by {{ modified_by }}{% endblocktrans %}
+                                    <span class="avatar small"><img src="{% avatar_url page.get_latest_revision.user size=25 %}" alt="" /></span>
+                                {% endif %}
+                                <a href="{% url 'wagtailadmin_pages:revisions_index' page.id %}" class="underlined">{% trans 'Revisions' %}</a>
+                            {% endif %}
+                        </p>
+                    </li>
+                    {% block extra_footer_actions %}
+                    {% endblock %}
+                </ul>
+            </nav>
         </footer>
     </form>
 

wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html

@@ -4,7 +4,7 @@
         <div data-dropdown-toggle class="o-icon c-dropdown__toggle  [ icon icon-arrow-down ]"></div>
     </a>
     <div class="t-dark">
-        <ul role="menu" class="c-dropdown__menu u-toggle  u-arrow u-arrow--tl u-background">
+        <ul class="c-dropdown__menu u-toggle  u-arrow u-arrow--tl u-background">
         {% for button in buttons %}
             <li class="c-dropdown__item ">
                 <a href="{{ button.url }}" title="{{ button.attrs.title }}" class="u-link is-live {{ button.classes|join:' ' }}">

wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html

@@ -4,7 +4,7 @@
 Pagination for page listings. Used by the `{% paginate %}` template tag.
 {% endcomment %}
 
-<nav class="pagination" role="navigation" aria-label="{% trans 'Pagination' %}">
+<nav class="pagination" aria-label="{% trans 'Pagination' %}">
     <p>{% blocktrans with page_number=page.number num_pages=paginator.num_pages %}
         Page {{ page_number }} of {{ num_pages }}.
     {% endblocktrans %}</p>

wagtail/admin/templates/wagtailadmin/pages/search_results.html

@@ -12,7 +12,7 @@
         {% search_other %}
 
         {% if pages.object_list.supports_facet %}
-            <nav class="listing-filter" role="navigation">
+            <nav class="listing-filter">
                 <h3 class="filter-title">{% trans "Page types" %}</h3>
                 <ul class="filter-options">
                     {% if not selected_content_type %}

wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 {% load wagtailadmin_tags %}
 
-<nav class="pagination" role="navigation" aria-label="{% trans 'Pagination' %}">
+<nav class="pagination" aria-label="{% trans 'Pagination' %}">
     <p>{% blocktrans with page_num=items.number total_pages=items.paginator.num_pages %}Page {{ page_num }} of {{ total_pages }}.{% endblocktrans %}</p>
     <ul>
         <li class="prev">

wagtail/admin/templates/wagtailadmin/shared/breadcrumb.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<nav role="navigation" aria-label="{% trans 'Breadcrumb' %}">
+<nav aria-label="{% trans 'Breadcrumb' %}">
     <ul class="breadcrumb">
         {% for page in pages %}
             {% if page.is_root %}

wagtail/admin/templates/wagtailadmin/shared/main_nav.html

@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags %}
 {% load i18n %}
-<nav class="nav-main" role="navigation">
+<nav class="nav-main">
     <ul>
         {{ menu_html }}
 

wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html

@@ -17,7 +17,7 @@
         {% url linkurl as url_to_use %}
     {% endif %}
 
-    <nav class="pagination" role="navigation" aria-label="{% trans 'Pagination' %}">
+    <nav class="pagination" aria-label="{% trans 'Pagination' %}">
         <p>{% blocktrans with page_num=items.number total_pages=items.paginator.num_pages %}Page {{ page_num }} of {{ total_pages }}.{% endblocktrans %}</p>
         <ul>
             <li class="prev">

wagtail/admin/templates/wagtailadmin/shared/search_other.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-<nav class="listing-filter" role="navigation">
+<nav class="listing-filter">
     <h3 class="filter-title">{% trans "Other searches" %}</h3>
     <ul class="filter-options">
         {{ options_html }}

wagtail/contrib/modeladmin/templates/modeladmin/edit.html

@@ -11,7 +11,7 @@
 
         {% if user_can_delete %}
             <div class="dropdown-toggle icon icon-arrow-up"></div>
-            <ul role="menu">
+            <ul>
                 <li><a href="{{ view.delete_url }}" class="shortcut">{% trans "Delete" %}</a></li>
             </ul>
         {% endif %}

wagtail/contrib/modeladmin/templates/modeladmin/index.html

@@ -74,7 +74,7 @@
                     </div>
 
                     {% block pagination %}
-                        <nav class="pagination {% if view.has_filters and all_count %}col9{% else %}col12{% endif %}" role="navigation" aria-label="{% trans 'Pagination' %}">
+                        <nav class="pagination {% if view.has_filters and all_count %}col9{% else %}col12{% endif %}" aria-label="{% trans 'Pagination' %}">
                             <p>{% blocktrans with page_obj.number as current_page and paginator.num_pages as num_pages %}Page {{ current_page }} of {{ num_pages }}.{% endblocktrans %}</p>
                             {% if paginator.num_pages > 1 %}
                                 <ul>

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -18,7 +18,7 @@
 
     <div class="nice-padding">
         <h2>Contents</h2>
-        <nav role="navigation">
+        <nav>
             <ul class="unlist">
                 <li><a href="#palette">Colour palette</a></li>
                 <li><a href="#accessiblecolours">Accessible colour combinations</a></li>
@@ -507,7 +507,7 @@
                     <div class="dropdown dropdown-button match-width">
                         <input type="button" value="drop down" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-down"></div>
-                        <ul role="menu">
+                        <ul>
                             <li><a href="#">items should not exceed button width</a></li>
                             <li><a href="#">item 2</a></li>
                         </ul>
@@ -518,7 +518,7 @@
                     <div class="dropdown dropdown-button">
                         <input type="button" value="drop down" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-down"></div>
-                        <ul role="menu">
+                        <ul>
                             <li><a href="#">Items in this list do not match button width</a></li>
                             <li><a href="#">item 2</a></li>
                         </ul>
@@ -529,7 +529,7 @@
                     <div class="dropdown dropup dropdown-button match-width">
                         <input type="button" value="drop up" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-up"></div>
-                        <ul role="menu">
+                        <ul>
                             <li><a href="#">item 1</a></li>
                             <li><a href="#">item 2</a></li>
                         </ul>
@@ -540,7 +540,7 @@
                     <div class="dropdown dropup dropdown-button match-width">
                         <button value="drop up" class="button icon icon-view">icon dropup</button>
                         <div class="dropdown-toggle icon icon-arrow-up"></div>
-                        <ul role="menu">
+                        <ul>
                             <li><a href="#">item 1</a></li>
                             <li><a href="#">item 2</a></li>
                         </ul>
@@ -554,7 +554,7 @@
                     <div class="dropdown dropdown-button match-width">
                         <a href="#" class="button" value="drop down">Link button</a>
                         <div class="dropdown-toggle icon icon-arrow-down"></div>
-                        <ul role="menu">
+                        <ul>
                             <li><a href="#">items should not exceed button width</a></li>
                             <li><a href="#">item 2</a></li>
                         </ul>
@@ -579,55 +579,57 @@
                         <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle  [ icon icon-arrow-down ]"></div>
                     </a>
                     <div class="t-dark">
-                        <ul role="menu" class="c-dropdown__menu  u-toggle  u-arrow u-arrow--tl u-background">
-                            <li class="c-dropdown__item ">
-                                <a href="/admin/pages/2/move/" class="u-link is-live ">
-                                    Move
-                                </a>
-                            </li>
-                            <li class="c-dropdown__item ">
-                                <a href="/admin/pages/2/copy/" class="u-link is-live ">
-                                    Copy
-                                </a>
-                            </li>
-                            <li class="c-dropdown__item ">
-                                <a href="/admin/pages/2/delete/" class="u-link is-live ">
-                                    Delete
-                                </a>
-                            </li>
-                            <li class="c-dropdown__item ">
-                                <a href="/admin/pages/2/unpublish/" class="u-link is-live ">
-                                    Unpublish
-                                </a>
-                            </li>
-                            <li>
-                                <hr class="c-dropdown__divider">
-                            </li>
-                            <li class="c-dropdown__item">
-                                <a href="#" class="u-link is-live">
-                                    <span title="Live" class="c-indicator c-dropdown__indicator"></span>
-                                    Live
-                                </a>
-                            </li>
-                            <li class="c-dropdown__item">
-                                <a href="#" class="u-link is-draft">
-                                    <span title="Draft" class="c-indicator c-dropdown__indicator"></span>
-                                    Draft
-                                </a>
-                            </li>
-                            <li class="c-dropdown__item">
-                                <a href="#" class="u-link is-live+draft">
-                                    <span title="Live + Draft" class="c-indicator c-dropdown__indicator"></span>
-                                    Live + Draft
-                                </a>
-                            </li>
-                            <li class="c-dropdown__item">
-                                <a href="#" class="u-link is-absent">
-                                    <span title="Absent" class="c-indicator c-dropdown__indicator"></span>
-                                    Absent
-                                </a>
-                            </li>
-                        </ul>
+                        <nav aria-label="Inline dropdown menu example">
+                            <ul class="c-dropdown__menu  u-toggle  u-arrow u-arrow--tl u-background">
+                                <li class="c-dropdown__item ">
+                                    <a href="/admin/pages/2/move/" class="u-link is-live ">
+                                        Move
+                                    </a>
+                                </li>
+                                <li class="c-dropdown__item ">
+                                    <a href="/admin/pages/2/copy/" class="u-link is-live ">
+                                        Copy
+                                    </a>
+                                </li>
+                                <li class="c-dropdown__item ">
+                                    <a href="/admin/pages/2/delete/" class="u-link is-live ">
+                                        Delete
+                                    </a>
+                                </li>
+                                <li class="c-dropdown__item ">
+                                    <a href="/admin/pages/2/unpublish/" class="u-link is-live ">
+                                        Unpublish
+                                    </a>
+                                </li>
+                                <li>
+                                    <hr class="c-dropdown__divider">
+                                </li>
+                                <li class="c-dropdown__item">
+                                    <a href="#" class="u-link is-live">
+                                        <span title="Live" class="c-indicator c-dropdown__indicator"></span>
+                                        Live
+                                    </a>
+                                </li>
+                                <li class="c-dropdown__item">
+                                    <a href="#" class="u-link is-draft">
+                                        <span title="Draft" class="c-indicator c-dropdown__indicator"></span>
+                                        Draft
+                                    </a>
+                                </li>
+                                <li class="c-dropdown__item">
+                                    <a href="#" class="u-link is-live+draft">
+                                        <span title="Live + Draft" class="c-indicator c-dropdown__indicator"></span>
+                                        Live + Draft
+                                    </a>
+                                </li>
+                                <li class="c-dropdown__item">
+                                    <a href="#" class="u-link is-absent">
+                                        <span title="Absent" class="c-indicator c-dropdown__indicator"></span>
+                                        Absent
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav>
                     </div>
                 </div>
             </div>
@@ -640,13 +642,15 @@
                         <div data-dropdown-toggle="" class="o-icon  c-dropdown__toggle  [ icon icon-arrow-down ]"></div>
                     </a>
                     <div class="t-dark">
-                        <ul role="menu" class="c-dropdown__menu  u-toggle  u-arrow u-arrow--tl u-background">
-                            <li class="c-dropdown__item ">
-                                <a href="/admin/pages/2/move/" class="u-link is-live ">
-                                    Move
-                                </a>
-                            </li>
-                        </ul>
+                        <nav aria-label="Dark inline dropdown menu example">
+                            <ul class="c-dropdown__menu  u-toggle  u-arrow u-arrow--tl u-background">
+                                <li class="c-dropdown__item ">
+                                    <a href="/admin/pages/2/move/" class="u-link is-live ">
+                                        Move
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav>
                     </div>
                 </div>
             </header>

wagtail/snippets/templates/wagtailsnippets/snippets/edit.html

@@ -13,6 +13,7 @@
                 {% csrf_token %}
                 {{ edit_handler.render_form_content }}
                 <footer role="contentinfo">
+                    <nav aria-label="{% trans 'Actions' %}">
                     <ul>
                         <li class="actions">
                             <div class="dropdown dropup dropdown-button match-width">
@@ -20,12 +21,13 @@
                                     <span class="icon icon-spinner"></span><em>{% trans 'Save' %}</em>
                                 </button>
                                 <div class="dropdown-toggle icon icon-arrow-up"></div>
-                                <ul role="menu">
+                                <ul>
                                     <li><a href="{% url 'wagtailsnippets:delete' model_opts.app_label model_opts.model_name instance.pk|admin_urlquote %}" class="shortcut">{% trans "Delete" %}</a></li>
                                 </ul>
                             </div>
                         </li>
                     </ul>
+                    </nav>
                 </footer>
             </form>
         </div>