🐛 Fixed various small accessibility problems in the admin screen (#1583)

refs #11863

* 🐛 Fixed accessible button label for showing and hiding custom post types.
* 🐛 Made the menu separators accessible.
* 🐛 Fixed the More item to be a button for assistive technologies.
This commit is contained in:
Marco Zehe 2020-05-28 16:51:14 +02:00 committed by GitHub
parent 3da16a8c32
commit ef56dbfad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions

View File

@ -5,5 +5,5 @@
<LinkTo @route="posts">{{svg-jar "content" data-test-mobile-nav="posts"}}Posts</LinkTo>
{{/if}}
<LinkTo @route="staff" @classNames="gh-nav-main-users" data-test-mobile-nav="staff">{{svg-jar "account-group"}}Staff</LinkTo>
<div class="gh-mobile-nav-bar-more" {{action "openMobileMenu" target=this.ui data-test-mobile-nav="more"}}>{{svg-jar "icon" class="icon-gh"}}More</div>
<div role="button" class="gh-mobile-nav-bar-more" {{action "openMobileMenu" target=this.ui data-test-mobile-nav="more"}}>{{svg-jar "icon" class="icon-gh"}}More</div>
{{yield}}

View File

@ -34,7 +34,7 @@
<GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts"}} data-test-nav="posts">{{svg-jar "posts"}}Posts</GhLinkToCustomViewsIndex>
<LinkTo @route="editor.new" @model="post" @classNames="gh-secondary-action gh-nav-new-post" @alt="New post" @title="New post" data-test-nav="new-story"><span>{{svg-jar "add-stroke"}}</span></LinkTo>
{{#if this.customViews.forPosts}}
<button type="button" class="absolute left-3 top-2 z-9999 flex items-center pl2 h4 gh-nav-button-expand {{if this.navigation.settings.expanded.posts "expanded"}}" {{on "click" (fn this.navigation.toggleExpansion "posts")}}>
<button type="button" class="absolute left-3 top-2 z-9999 flex items-center pl2 h4 gh-nav-button-expand {{if this.navigation.settings.expanded.posts "expanded"}}" {{on "click" (fn this.navigation.toggleExpansion "posts")}} aria-label="{{if this.navigation.settings.expanded.posts "Collapse custom post types" "Expand custom post types"}}">
{{svg-jar (if this.navigation.settings.expanded.posts "arrow-down-stroke" "arrow-right-stroke")}}
</button>
{{#liquid-if this.navigation.settings.expanded.posts}}
@ -154,7 +154,7 @@
{{/if}}
</button>
</li>
<li class="divider"></li>
<li class="divider" role="separator"></li>
<li role="presentation">
<LinkTo @route="staff.user" @model={{this.session.user.slug}} @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="user-profile">
{{svg-jar "user-circle"}} Your Profile
@ -178,12 +178,12 @@
{{svg-jar "book-open"}} How to Use Ghost
</a>
</li>
<li class="divider"></li>
<li class="divider" role="separator"></li>
{{#if this.showDropdownExtension}}
{{#each this.config.clientExtensions.dropdown.items as |menuItem| }}
{{#if menuItem.divider}}
<li class="divider"></li>
<li class="divider" role="separator"></li>
{{else}}
<li role="presentation">
<a href="{{menuItem.href}}" target="_blank" class="dropdown-item {{menuItem.classes}}" role="menuitem" tabindex="-1">