Various A11y post screen fixes (#1584)

refs #11863

* 🐛 Gave various buttons accessible labels

Hidden span elements are not rendered to assistive technologies, so duplicate the text in an aria-label on the button element.

* 🐛 Fixed various accessibility issues in the editor

* Made menus menus and menu item menuitems.
* Added labels to buttons where there were only hidden spans, or no text at all.
* Made separators show up for screen readers.

app/components/gh-post-settings-menu.hbs

@@ -3,7 +3,7 @@
         <div class="{{if this.isViewingSubview 'settings-menu-pane-out-left' 'settings-menu-pane-in'}} settings-menu settings-menu-pane">
             <div class="settings-menu-header">
                 <h4>{{capitalize this.post.displayName}} settings</h4>
-                <button class="close settings-menu-header-action" {{action "closeMenus" target=this.ui}} data-test-close-settings-menu>
+                <button aria-label="Close" class="close settings-menu-header-action" {{action "closeMenus" target=this.ui}} data-test-close-settings-menu>
                     {{svg-jar "close"}}<span class="hidden">Close</span>
                 </button>
             </div>
@@ -182,7 +182,7 @@
                 {{#if this.isViewingSubview}}
                     {{#if (eq this.subview "meta-data")}}
                         <div class="settings-menu-header subview">
-                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
+                            <button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                             <h4>Meta data</h4>
                             <div style="width:23px;"></div>
                         </div>
@@ -246,7 +246,7 @@
 
                     {{#if (eq this.subview "twitter-data")}}
                         <div class="settings-menu-header subview">
-                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
+                            <button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                             <h4>Twitter card</h4>
                             <div style="width:23px;"></div>
                         </div>
@@ -326,7 +326,7 @@
 
                     {{#if (eq this.subview "facebook-data")}}
                         <div class="settings-menu-header subview">
-                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
+                            <button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                             <h4>Facebook card</h4>
                             <div style="width:23px;"></div>
                         </div>
@@ -395,7 +395,7 @@
 
                     {{#if (eq this.subview "codeinjection")}}
                         <div class="settings-menu-header subview">
-                            <button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
+                            <button aria-label="Back" {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
                             <h4>Code injection</h4>
                             <div style="width:23px;"></div>
                         </div>

lib/koenig-editor/addon/components/koenig-card.hbs

@@ -22,7 +22,7 @@
     <KgActionBar @class="absolute" @style={{this.toolbarStyle}} @isVisible={{this.shouldShowToolbar}}>
         {{#each this.toolbar.items as |item|}}
             {{#if item.divider}}
-                <li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5"></li>
+                <li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5" role="separator"></li>
             {{else}}
                 <li class="ma0 lh-solid">
                     <button

lib/koenig-editor/addon/components/koenig-link-input.hbs

@@ -7,7 +7,7 @@
 />
 
 {{#if href}}
-    <button class="kg-input-bar-close" type="button" {{action "clear"}}>
+    <button aria-label="Close" class="kg-input-bar-close" type="button" {{action "clear"}}>
         {{svg-jar "close" class="ih2 stroke-midlightgrey-l2"}}
     </button>
 {{/if}}

lib/koenig-editor/addon/components/koenig-menu-content.hbs

@@ -4,8 +4,8 @@
     </div>
     {{#each section.items as |item|}}
         {{#if (or (not item.developerExperiment) (and item.developerExperiment config.enableDeveloperExperiments))}}
-            <div class="{{if item.selected "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" onclick={{action itemClicked item}} data-kg="cardmenu-card">
-                <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}">{{svg-jar item.icon class="w8 h8"}}</div>
+            <div class="{{if item.selected "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" onclick={{action itemClicked item}} data-kg="cardmenu-card" role="menuitem">
+                <div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w8 h8"}}</div>
                 <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
             </div>
         {{/if}}

lib/koenig-editor/addon/components/koenig-plus-menu.hbs

@@ -1,10 +1,10 @@
 {{#if this.showButton}}
-    <button class="koenig-plus-menu-button flex justify-center items-center relative w9 h9 ba b--midlightgrey-l2 bg-white br-100 anim-normal" onclick={{action "openMenu"}}>{{svg-jar "plus" class="w4 h4 stroke-middarkgrey i-strokew--2"}}</button>
+    <button aria-label="Add a card" class="koenig-plus-menu-button flex justify-center items-center relative w9 h9 ba b--midlightgrey-l2 bg-white br-100 anim-normal" onclick={{action "openMenu"}}>{{svg-jar "plus" class="w4 h4 stroke-middarkgrey i-strokew--2"}}</button>
 {{/if}}
 
 {{#if this.showMenu}}
     {{!-- TODO: restructure HTML and update kg-style helper to avoid negative margins on divider/title elements --}}
-    <div class="{{kg-style "cardmenu"}} pa0">
+    <div class="{{kg-style "cardmenu"}} pa0" role="menu">
         {{!-- <div class="koenig-cardmenu-search">
             {{svg-jar "koenig/search"}}
             <input type="text" placeholder="Search for a card..." class="gh-input koenig-cardmenu-search-input">

lib/koenig-editor/addon/components/koenig-slash-menu.hbs

@@ -1,5 +1,5 @@
 {{#if (and this.showMenu this.itemSections)}}
-    <div class="koenig-cardmenu {{kg-style "cardmenu"}}">
+    <div class="koenig-cardmenu {{kg-style "cardmenu"}}" role="menu">
         <KoenigMenuContent @itemSections={{this.itemSections}} @itemClicked={{action "itemClicked"}} />
     </div>
 {{/if}}

lib/koenig-editor/addon/components/koenig-toolbar.hbs

@@ -42,7 +42,7 @@
         </li>
     {{/unless}}
 
-    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5"></li>
+    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
 
     {{#unless basicOnly}}
         <li class="ma0 lh-solid">