John Cowen e4e85a8f83
ui: Move control of login modal to use JS rather than HTML (label/id) (#9883)
* Add before and after skip links portals

* Move EmptyState and ErrorState to use a @login action/function

* Move page title setting to the Route component

* Add Routes and Outlets everywhere, and use those to access login modal

* Add some aria-labels to the modals

* Docs

* Remove the label/input now we no longer need it, fixup pageobject

* Add basic modal docs

* Switch out old toggle names for ids

* Wrap nspace Route template in a Route component

* type > class
2021-04-06 13:40:40 +01:00

59 lines
1.5 KiB
Handlebars

{{#let (hash
labelledby=(unique-id)
) as |aria|}}
<Portal @target="modal">
{{yield}}
<div
class="modal-dialog"
aria-hidden="true"
...attributes
{{did-insert (action "connect")}}
{{will-destroy (action "disconnect")}}
>
<div tabindex="-1" data-a11y-dialog-hide></div>
<div
class="modal-dialog-modal"
role="dialog"
aria-label={{@aria.label}}
>
<div
role="document"
>
<header class="modal-dialog-header">
<button
type="button"
data-a11y-dialog-hide
aria-label="Close dialog"
>
</button>
<YieldSlot @name="header">
{{yield (hash
open=(action "open")
close=(action "close")
aria=aria
)}}
</YieldSlot>
</header>
<div class="modal-dialog-body">
<YieldSlot @name="body">
{{yield (hash
open=(action "open")
close=(action "close")
aria=aria
)}}
</YieldSlot>
</div>
<footer class="modal-dialog-footer">
<YieldSlot @name="actions" @params={{block-params (action "close")}}>
{{yield (hash
open=(action "open")
close=(action "close")
aria=aria
)}}
</YieldSlot>
</footer>
</div>
</div>
</div>
</Portal>
{{/let}}