Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-05-03 04:54:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Helen Chapman 2019-06-05 19:11:55 +01:00 committed by Thibaud Colas
parent a3f2748c5d
commit 669c1af4a0
17 changed files with 152 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.txt
View file

@ -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)

1
docs/releases/2.6.rst
View file

@ -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

2
wagtail/admin/templates/wagtailadmin/pages/action_menu/menu.html
View file

@ -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 %}

56
wagtail/admin/templates/wagtailadmin/pages/create.html
View file

@ -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>

80
wagtail/admin/templates/wagtailadmin/pages/edit.html
View file

@ -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>
<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>
</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>
{{ action_menu.render_html }}
</div>
{% else %}
{% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label icon=1 %}
{% endif %}
</li>
</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 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>

2
wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html
View file

@ -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:' ' }}">

2
wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html
View file

@ -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>

2
wagtail/admin/templates/wagtailadmin/pages/search_results.html
View file

@ -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 %}

2
wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html
View file

@ -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">

2
wagtail/admin/templates/wagtailadmin/shared/breadcrumb.html
View file

@ -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 %}

2
wagtail/admin/templates/wagtailadmin/shared/main_nav.html
View file

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

2
wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html
View file

@ -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">

2
wagtail/admin/templates/wagtailadmin/shared/search_other.html
View file

@ -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 }}

2
wagtail/contrib/modeladmin/templates/modeladmin/edit.html
View file

@ -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 %}

2
wagtail/contrib/modeladmin/templates/modeladmin/index.html
View file

@ -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>

128
wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
View file

@ -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>

4
wagtail/snippets/templates/wagtailsnippets/snippets/edit.html
View file

@ -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>