Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card.hbs
Marco Zehe adb7828003 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.
2020-05-28 16:01:09 +01:00

40 lines
1.6 KiB
Handlebars

{{#if this.icon}}
<StickyElement @top={{this.iconTop}} @bottom={{36}}>
{{svg-jar this.icon class=this.iconClass}}
</StickyElement>
{{/if}}
{{yield (hash
CaptionInput=(component "koenig-caption-input"
captureInput=this.isSelected
addParagraphAfterCard=this.addParagraphAfterCard
moveCursorToPrevSection=this.moveCursorToPrevSection
moveCursorToNextSection=this.moveCursorToNextSection
)
AltInput=(component "koenig-alt-input"
addParagraphAfterCard=this.addParagraphAfterCard
moveCursorToPrevSection=this.moveCursorToPrevSection
moveCursorToNextSection=this.moveCursorToNextSection
)
)}}
{{#if this.toolbar}}
<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" role="separator"></li>
{{else}}
<li class="ma0 lh-solid">
<button
type="button"
title={{item.title}}
class="dib dim-lite link h9 w9 nudge-top--1 justify-center {{item.buttonClass}}"
onmousedown={{action item.action}}
>
{{#if item.icon}}{{svg-jar item.icon class=(concat item.iconClass (if item.text " mr2") " w4 h4")}} {{/if}}{{item.text}}
</button>
</li>
{{/if}}
{{/each}}
</KgActionBar>
{{/if}}