John Cowen 17438020f1
ui: Accessibility scan improvements (#9485)
* ui: Remove all vestiges of role=tabpanel

* Switch out tablist role for a label, default to Secondary

* Move healthcheckout-output headers to h2, ideally these would be outside the component

* Add aria-label for empty button

* Fix up non-unique ids in topology component

* Temporarily fixup h2 in KV > LockSession

* Fixup dl with no dt

* h3 > h2

* Fix up page objects that were reliant on ids
2021-01-05 10:05:59 +00:00

98 lines
2.0 KiB
Handlebars

<div
class="topology-metrics-popover {{@type}}"
...attributes
>
{{#if (eq @type 'deny')}}
<InformedAction
class="dangerous"
{{did-insert (set this 'popover')}}
>
<:header>
<h3>
Connection Denied
</h3>
</:header>
<:body>
<p>
Add an intention that allows these two services to connect.
</p>
</:body>
<:actions as |Actions|>
<Actions.Action class="action">
<button
{{on "click" @oncreate}}
type="button"
>
Create
</button>
</Actions.Action>
<Actions.Action>
<button
{{on 'click' (fn (optional this.popoverController.hide))}}
class="cancel"
type="button"
>
Cancel
</button>
</Actions.Action>
</:actions>
</InformedAction>
{{else}}
<InformedAction
class="info"
{{did-insert (set this 'popover')}}
>
<:header>
<h3>
Layer 7 permissions
</h3>
</:header>
<:body>
<p>
Certain HTTP request info must be identified.
</p>
</:body>
<:actions as |Actions|>
<Actions.Action class="action">
<a
href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}
>
View
</a>
</Actions.Action>
<Actions.Action>
<button
{{on 'click' (fn (optional this.popoverController.hide))}}
class="cancel"
type="button"
>
Close
</button>
</Actions.Action>
</:actions>
</InformedAction>
{{/if}}
<button
{{with-overlay
this.popover
options=(hash
theme="square-tail"
placement="bottom-start"
)
returns=(set this 'popoverController')
}}
type="button"
{{on 'click' (fn (optional this.popoverController.show))}}
style={{{concat 'top:' @position.y 'px;left:' @position.x 'px;'}}}
aria-label={{if (eq @type 'deny') 'Add intention' 'View intention'}}
>
</button>
</div>