scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-29 17:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Add a11y testing (#24476)

Browse Source
This commit is contained in:
Chelsea Shaw
2023-12-18 11:03:35 -06:00
committed by GitHub
parent 423b58c90b
commit 52c02ae41d
235 changed files with 1556 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
changelog/24476.txt Normal file
View File

@@ -0,0 +1,3 @@
```release-note:improvement
ui: improve accessibility - color contrast, labels, and automatic testing
```

9
ui/app/components/auth-saml.hbs
View File

@@ -46,10 +46,11 @@
Logging in with a SAML auth method requires a browser in a secure context.
</A.Description>
<A.Description class="has-top-margin-xs">
<ExternalLink @href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts">
Read more about secure contexts.
<Icon @name="external-link" />
</ExternalLink>
<Hds::Link::Standalone
@icon="external-link"
@text="Read more about secure contexts."
@href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts"
/>
</A.Description>
</Hds::Alert>
{{/if}}

16
ui/app/components/calendar-widget.js
View File

@@ -28,8 +28,6 @@ export default class CalendarWidget extends Component {
currentDate = timestamp.now();
@tracked calendarDisplayDate = this.currentDate; // init to current date, updates when user clicks on calendar chevrons
@tracked showCalendar = false;
@tracked tooltipTarget = null;
@tracked tooltipText = null;
// both date getters return a date object
get startDate() {
@@ -72,20 +70,6 @@ export default class CalendarWidget extends Component {
});
}
@action
addTooltip() {
if (this.disablePastYear) {
const previousYear = this.displayYear - 1;
this.tooltipText = `${previousYear} is unavailable because it is before your start date. Change your start month to a date in ${previousYear} to see data for this year.`;
this.tooltipTarget = '#previous-year';
}
}
@action
removeTooltip() {
this.tooltipTarget = null;
}
@action
addYear() {
this.calendarDisplayDate = addYears(this.calendarDisplayDate, 1);

6
ui/app/components/policy-form.hbs
View File

@@ -23,11 +23,11 @@
</div>
{{/if}}
<div class="field">
<Toolbar>
<Toolbar aria-label="toolbar for managing {{or @model.name 'new'}} policy">
<label class="has-text-weight-bold has-right-margin-xxs">Policy</label>
{{#if @renderPolicyExampleModal}}
{{! only true in policy create and edit routes }}
<ToolbarFilters>
<ToolbarFilters aria-label="help tools for managing {{or @model.name 'new'}} policy">
<Hds::Button
@text="How to write a policy"
@icon="bulb"
@@ -38,7 +38,7 @@
/>
</ToolbarFilters>
{{/if}}
<ToolbarActions>
<ToolbarActions aria-label="actions for managing {{or @model.name 'new'}} policy">
<div class="toolbar-separator"></div>
{{#if @model.isNew}}
<div class="control is-flex">

4
ui/app/components/sidebar/frame.hbs
View File

@@ -13,7 +13,7 @@
@icon="vault"
@route="vault.cluster.dashboard"
@model={{this.currentCluster.cluster.name}}
@ariaLabel="home link"
@ariaLabel="Vault home"
data-test-sidebar-logo
/>
</:logo>
@@ -31,7 +31,7 @@
{{! this block is where the Hds::SideNav::Portal components render into }}
<:body>
<Hds::SideNav::Portal::Target aria-label="sidebar navigation links" />
<Hds::SideNav::Portal::Target />
</:body>
<:footer>

3
ui/app/components/tool-actions-form.js
View File

@@ -10,6 +10,7 @@ import Component from '@ember/component';
import { setProperties, computed, set } from '@ember/object';
import { addSeconds, parseISO } from 'date-fns';
import { A } from '@ember/array';
import { capitalize } from '@ember/string';
const DEFAULTS = {
token: null,
@@ -30,6 +31,7 @@ const DEFAULTS = {
const WRAPPING_ENDPOINTS = ['lookup', 'wrap', 'unwrap', 'rewrap'];
export default Component.extend(DEFAULTS, {
flashMessages: service(),
store: service(),
// putting these attrs here so they don't get reset when you click back
//random
@@ -97,6 +99,7 @@ export default Component.extend(DEFAULTS, {
props = assign({}, props, { [keyName]: resp.wrap_info.token });
}
setProperties(this, props);
this.flashMessages.success(`${capitalize(action)} was successful.`);
},
getData() {

2
ui/app/styles/components/auth-form.scss
View File

@@ -37,6 +37,6 @@
}
.is-label {
color: $grey;
color: var(--token-color-foreground-faint);
}
}

33
ui/app/styles/components/calendar-widget.scss
View File

@@ -32,30 +32,6 @@ $dark-gray: #535f73;
.calendar-widget {
grid-area: calendar-widget;
> button {
&.is-month-list {
background-color: $white;
color: black;
text-align: center;
border: $light-border;
border-radius: $radius;
}
&.is-current-month {
border: 1px solid $ui-gray-900;
}
&:hover {
background-color: lighten($dark-gray, 30%);
color: $white;
text-align: center;
cursor: pointer;
}
&.is-readOnly {
background-color: $ui-gray-100;
color: lighten($dark-gray, 30%);
pointer-events: none;
}
}
}
.border-col {
@@ -84,15 +60,6 @@ $dark-gray: #535f73;
}
// for modal-dialog tooltips
.calendar-tooltip {
background-color: $ui-gray-700;
color: $white;
font-size: $size-8;
padding: $spacing-10;
border-radius: $radius-large;
width: 141px;
}
.ember-modal-dialog {
z-index: 1000;
}

17
ui/app/styles/components/console-ui-panel.scss
View File

@@ -50,6 +50,10 @@ $console-close-height: 35px;
margin-left: $spacing-20;
padding: $spacing-12 $spacing-20;
}
.console-ui-panel-intro {
color: var(--token-color-palette-neutral-400);
}
}
.console-ui-input {
@@ -83,6 +87,7 @@ $console-close-height: 35px;
padding-right: $spacing-36;
position: relative;
background-color: rgba(#000, 0);
color: var(--token-color-palette-neutral-400);
&:hover {
background-color: rgba(#000, 0.5);
}
@@ -91,12 +96,24 @@ $console-close-height: 35px;
.console-ui-alert {
margin-left: calc(#{$spacing-20} - 0.33rem);
position: relative;
color: var(--token-color-palette-neutral-400);
svg {
position: absolute;
left: 0;
top: 0;
}
&.console-ui-alert--error {
// HDS tokens are not light enough on the dark background to pass a11y tests.
// hex value for --token-color-foreground-critical
color: lighten(#e52228, 20%);
}
&.console-ui-alert--success {
// HDS tokens are not light enough on the dark background to pass a11y tests.
// hex value for --token-color-foreground-success
color: lighten(#008a22, 20%);
}
}
.panel-open .console-ui-panel {

1
ui/app/styles/components/doc-link.scss
View File

@@ -5,7 +5,6 @@
.doc-link {
color: $blue;
text-decoration: none;
font-weight: $font-weight-semibold;
&:hover {
text-decoration: underline !important;

12
ui/app/styles/components/empty-state-component.scss
View File

@@ -5,8 +5,8 @@
.empty-state {
align-items: center;
color: $grey;
background: $ui-gray-010;
color: var(--token-color-foreground-faint);
background: var(--token-color-surface-faint);
display: flex;
justify-content: center;
padding: $spacing-48 $spacing-12;
@@ -15,7 +15,7 @@
.empty-state-transparent {
align-items: center;
color: $grey;
color: var(--token-color-foreground-faint);
background: transparent;
display: flex;
justify-content: center;
@@ -50,12 +50,6 @@
display: flex;
justify-content: space-between;
a,
.link,
a:not(.button):not(.file-delete-button):not(.tag) {
text-decoration: none;
}
> * + * {
margin-left: $spacing-12;
margin-right: $spacing-12;

7
ui/app/styles/components/masked-input.scss
View File

@@ -3,8 +3,9 @@
* SPDX-License-Identifier: BUSL-1.1
*/
.masked-font {
color: $ui-gray-300;
.masked-font,
pre.masked-font {
color: var(--token-color-foreground-faint);
}
.masked-input {
@@ -84,7 +85,7 @@
}
.masked-input.masked .masked-value {
color: $grey-light;
color: var(--token-color-foreground-faint);
}
.masked-input .input:focus + .masked-input-toggle {

2
ui/app/styles/components/radio-card.scss
View File

@@ -83,7 +83,7 @@
}
.radio-card-message-body {
line-height: 1.2;
color: $ui-gray-500;
color: var(--token-color-foreground-faint);
font-size: $size-8;
}

2
ui/app/styles/components/search-select.scss
View File

@@ -113,7 +113,7 @@ div > .ember-power-select-options {
}
.search-select-list-key {
color: $grey;
color: var(--token-color-foreground-faint);
font-size: $size-8;
}

15
ui/app/styles/components/tool-tip.scss
View File

@@ -7,21 +7,24 @@
font-size: $size-7;
text-transform: none;
margin: 8px 0px 0 -4px;
border: none;
border-radius: $radius-large;
.box {
position: relative;
color: $white;
max-width: 200px;
background: $grey;
background: $black;
padding: 0.5rem;
line-height: 1.4;
border-radius: $radius-large;
}
.fit-content {
max-width: fit-content;
}
@include css-top-arrow(8px, $grey, 1px, $grey-dark, 20px);
@include css-top-arrow(8px, $black, 1px, $black, 20px);
&.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
animation: drop-fade-above 0.15s;
}
@@ -53,17 +56,17 @@
}
.ember-basic-dropdown-content--below.ember-basic-dropdown-content--left.tool-tip {
@include css-top-arrow(8px, $grey, 1px, $grey-dark, calc(100% - 20px));
@include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
}
.ember-basic-dropdown-content--below.ember-basic-dropdown-content--right.tool-tip {
@include css-top-arrow(8px, $grey, 1px, $grey-dark, calc(100% - 20px));
@include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
}
.ember-basic-dropdown-content--above.tool-tip {
@include css-bottom-arrow(8px, $grey, 1px, $grey-dark);
@include css-bottom-arrow(8px, $black, 1px, $black);
margin-top: -8px;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown-content--right.tool-tip {
@include css-bottom-arrow(8px, $grey, 1px, $grey-dark, calc(100% - 20px));
@include css-bottom-arrow(8px, $black, 1px, $black, calc(100% - 20px));
}
.b-checkbox .tool-tip-trigger {

4
ui/app/styles/core/charts.scss
View File

@@ -250,7 +250,7 @@ p.data-details {
}
.chart-tooltip {
background-color: $ui-gray-700;
background-color: $black;
color: white;
font-size: $size-9;
padding: 6px;
@@ -282,7 +282,7 @@ p.data-details {
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 9px solid $ui-gray-700;
border-top: 9px solid $black;
position: absolute;
opacity: 0.8;
bottom: -9px;

3
ui/app/styles/core/element-styling.scss
View File

@@ -33,7 +33,8 @@ h6 {
a:hover,
body,
pre,
// default set here is too dark for HDS codeblock
pre:not(.hds-code-block__code),
strong,
table th {
color: $ui-gray-900;

2
ui/app/styles/core/inputs.scss
View File

@@ -81,5 +81,5 @@
.input-hint {
padding: 0 $spacing-10;
font-size: $size-8;
color: $grey;
color: var(--token-color-foreground-faint);
}

12
ui/app/styles/core/json-diff-patch.scss
View File

@@ -9,15 +9,23 @@
.jsondiffpatch-deleted pre,
.jsondiffpatch-modified .jsondiffpatch-left-value pre,
.jsondiffpatch-textdiff-deleted {
background: $red-500;
background: var(--token-color-foreground-critical-high-contrast);
}
.jsondiffpatch-added .jsondiffpatch-property-name,
.jsondiffpatch-added .jsondiffpatch-value pre,
.jsondiffpatch-modified .jsondiffpatch-right-value pre,
.jsondiffpatch-textdiff-added {
background: $green-500;
background: var(--token-color-foreground-success-high-contrast);
}
.jsondiffpatch-property-name {
color: $ui-gray-300;
}
.jsondiffpatch-added > .jsondiffpatch-property-name {
color: var(--token-color-surface-success);
}
.jsondiffpatch-deleted > .jsondiffpatch-property-name {
color: var(--token-color-surface-critical);
}

4
ui/app/styles/core/link.scss
View File

@@ -21,7 +21,3 @@
cursor: default;
}
}
// NICE TO HAVE: replace all instances with helper "is-no-underline"
.link-plain {
text-decoration: none;
}

7
ui/app/styles/core/tag.scss
View File

@@ -7,9 +7,10 @@
.tag:not(body) {
align-items: center;
background-color: $ui-gray-100;
// same as HDS::Badge @color=neutral
background-color: var(--token-color-surface-strong);
color: var(--token-color-foreground-primary);
border-radius: $radius;
color: $grey;
display: inline-flex;
font-size: $size-8;
font-weight: $font-weight-normal;
@@ -22,7 +23,7 @@
vertical-align: middle;
code {
color: $grey;
color: var(--token-color-foreground-primary);
}
.icon {

10
ui/app/styles/helper-classes/colors.scss
View File

@@ -60,15 +60,11 @@ select.has-error-border,
}
.has-text-grey-light {
color: $ui-gray-300 !important;
}
.has-text-grey-400 {
color: $ui-gray-400;
color: var(--token-color-foreground-faint) !important;
}
.has-text-grey {
color: $ui-gray-500 !important;
color: var(--token-color-foreground-faint) !important;
}
.has-text-grey-dark {
@@ -92,7 +88,7 @@ select.has-error-border,
}
.has-text-success {
color: $green-500 !important;
color: var(--token-color-foreground-success) !important;
}
.has-text-highlight {

4
ui/app/styles/helper-classes/typography.scss
View File

@@ -3,7 +3,7 @@
* SPDX-License-Identifier: BUSL-1.1
*/
/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration.
/* This helper includes styles relating to: font-size, font-family, font-alignment, text-transform, text-weight, font-style, text-decoration.
* Deprecated, please use the HDS text component to style fonts https://helios.hashicorp.design/components/text */
// font size helpers
@@ -101,7 +101,7 @@
}
.sub-text {
color: $grey;
color: var(--token-color-foreground-faint);
margin-bottom: $size-11;
font-size: $size-8;

1
ui/app/templates/components/auth-form.hbs
View File

@@ -140,6 +140,7 @@
autocomplete="off"
spellcheck="false"
data-test-token={{true}}
id="token"
/>
</div>
</div>

5
ui/app/templates/components/auth-jwt.hbs
View File

@@ -28,16 +28,17 @@
</div>
{{#unless this.isOIDC}}
<div class="field">
<label for="token" class="is-label">JWT Token</label>
<label for="jwt-token" class="is-label">JWT Token</label>
<div class="control">
<Input
@type="password"
@value={{this.jwt}}
id="jwt-token"
name="jwt"
class="input"
autocomplete="off"
spellcheck="false"
data-test-jwt={{true}}
data-test-jwt
/>
</div>
</div>

118
ui/app/templates/components/calendar-widget.hbs
View File

@@ -11,16 +11,14 @@
<Chevron @direction="down" @isButton={{true}} />
</D.Trigger>
<D.Content @defaultClass={{concat "popup-menu-content calendar-content" (if this.showCalendar " calendar-open")}}>
<nav class="box menu">
<div class="calendar-title is-subtitle-gray">
DATE OPTIONS
</div>
<nav class="box menu" aria-label="calendar date selector navigation">
<Hds::Text::Body class="calendar-title" @color="faint">DATE OPTIONS</Hds::Text::Body>
{{! TODO Hds::Dropdown swapout }}
<ul class="menu-list">
<li class="action">
<button
data-test-current-month
class="link link-plain has-text-weight-semibold is-ghost"
class="link is-no-underline has-text-weight-semibold is-ghost"
type="button"
name="currentMonth"
{{on "click" (fn this.handleDateShortcut D.actions)}}
@@ -31,7 +29,7 @@
<li class="action">
<button
data-test-current-billing-period
class="link link-plain has-text-weight-semibold is-ghost"
class="link is-no-underline has-text-weight-semibold is-ghost"
type="button"
name="reset"
{{on "click" (fn this.handleDateShortcut D.actions)}}
@@ -42,7 +40,7 @@
<li class="action">
<button
data-test-show-calendar
class={{concat "link link-plain has-text-weight-semibold is-ghost" (if this.showCalendar " is-active")}}
class={{concat "link is-no-underline has-text-weight-semibold is-ghost" (if this.showCalendar " is-active")}}
type="button"
{{on "click" this.toggleShowCalendar}}
>
@@ -59,46 +57,72 @@
{{#if this.showCalendar}}
<div class="calendar-widget-container" data-test-calendar-widget-container>
<div class="select-year">
<Hds::Button
data-test-previous-year
id="previous-year"
disabled={{this.disablePastYear}}
{{on "click" this.subYear}}
@color="secondary"
@text="previous year"
@icon="chevron-left"
@isIconOnly={{true}}
/>
<p data-test-display-year>
{{#if this.disablePastYear}}
<Hds::TooltipButton
@text={{concat
(sub this.displayYear 1)
" is unavailable because it is before your start date. Change your start month to a date in "
(sub this.displayYear 1)
" to see data for this year."
}}
aria-label="More information about why previous year is disabled"
>
<Hds::Button
data-test-previous-year
id="previous-year"
disabled={{true}}
{{on "click" this.subYear}}
@color="secondary"
@text="previous year"
@icon="chevron-left"
@isIconOnly={{true}}
/>
</Hds::TooltipButton>
{{else}}
<Hds::Button
data-test-previous-year
id="previous-year"
{{on "click" this.subYear}}
@color="secondary"
@text="previous year"
@icon="chevron-left"
@isIconOnly={{true}}
/>
{{/if}}
<Hds::Text::Display data-test-display-year>
{{this.displayYear}}
</p>
<Hds::Button
data-test-next-year
id="next-year"
disabled={{this.disableFutureYear}}
{{on "click" this.addYear}}
@color="secondary"
@text="next year"
@icon="chevron-right"
@isIconOnly={{true}}
/>
{{#if this.tooltipTarget}}
{{! Component must be in curly bracket notation }}
{{! template-lint-disable no-curly-component-invocation }}
{{#modal-dialog
tagName="div"
tetherTarget=this.tooltipTarget
targetAttachment="top right"
attachment="top middle"
offset="150px 0"
}}
<div class={{"calendar-tooltip"}}>
<p>
{{this.tooltipText}}
</p>
</div>
<div class="chart-tooltip-arrow"></div>
{{/modal-dialog}}
</Hds::Text::Display>
{{#if this.disableFutureYear}}
<Hds::TooltipButton
@text={{concat
(add this.displayYear 1)
" is unavailable because data is only available up to the current month."
}}
aria-label="More information about why next year is disabled"
>
<Hds::Button
data-test-next-year
id="next-year"
disabled={{true}}
{{on "click" this.addYear}}
@color="secondary"
@text="next year"
@icon="chevron-right"
@isIconOnly={{true}}
/>
</Hds::TooltipButton>
{{else}}
<Hds::Button
data-test-next-year
id="next-year"
{{on "click" this.addYear}}
@color="secondary"
@text="next year"
@icon="chevron-right"
@isIconOnly={{true}}
/>
{{/if}}
</div>
<div class="calendar-widget-grid calendar-widget">
@@ -107,7 +131,7 @@
@text={{month.name}}
@color="secondary"
@size="small"
class="is-month-list {{if month.readonly 'is-readOnly'}}"
disabled={{month.readonly}}
data-test-calendar-month={{month.name}}
id={{month.index}}
{{on "click" (fn this.selectMonth month D.actions)}}

4
ui/app/templates/components/clients/dashboard.hbs
View File

@@ -6,8 +6,8 @@
<div class="box is-sideless is-fullwidth is-marginless is-bottomless">
<p class="has-bottom-margin-xl">
This dashboard will surface Vault client usage over time. Clients represent a user or service that has authenticated to
Vault. Documentation is available
<DocLink @path="/vault/docs/concepts/client-count">here.</DocLink>
Vault.
<Hds::Link::Inline @href={{doc-link "/vault/docs/concepts/client-count"}}>Documentation is available here</Hds::Link::Inline>.
Date queries are sent in UTC.
</p>
<h2 class="title is-6 has-bottom-margin-xs">

38
ui/app/templates/components/configure-aws-secret.hbs
View File

@@ -4,24 +4,28 @@
~}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation to configure A-W-S backend">
<ul>
<LinkTo
@route="vault.cluster.settings.configure-secret-backend"
@model={{@model.id}}
@query={{hash tab=""}}
data-test-aws-link="root-creds"
>
Dynamic IAM root credentials
</LinkTo>
<LinkTo
@route="vault.cluster.settings.configure-secret-backend"
@model={{@model.id}}
@query={{hash tab="leases"}}
data-test-aws-link="leases"
>
Leases
</LinkTo>
<li>
<LinkTo
@route="vault.cluster.settings.configure-secret-backend"
@model={{@model.id}}
@query={{hash tab=""}}
data-test-aws-link="root-creds"
>
Dynamic IAM root credentials
</LinkTo>
</li>
<li>
<LinkTo
@route="vault.cluster.settings.configure-secret-backend"
@model={{@model.id}}
@query={{hash tab="leases"}}
data-test-aws-link="leases"
>
Leases
</LinkTo>
</li>
</ul>
</nav>
</div>

38
ui/app/templates/components/console/command-input.hbs
View File

@@ -9,27 +9,21 @@
{{else}}
<Chevron />
{{/if}}
<input onkeyup={{action "handleKeyUp"}} value={{this.value}} autocomplete="off" spellcheck="false" />
<ToolTip @horizontalPosition="auto-right" @verticalPosition="above" as |d|>
<d.Trigger>
<Hds::Button
class="hds-side-nav__icon-button"
{{on "click" (action "fullscreen")}}
data-test-tool-tip-trigger
@icon={{if this.isFullscreen "minimize" "maximize"}}
@text={{if this.isFullscreen "Minimize" "Maximize"}}
@isIconOnly={{true}}
/>
</d.Trigger>
<d.Content @defaultClass="tool-tip">
<div class="box">
{{#if this.isFullscreen}}
Minimize
{{else}}
Maximize
{{/if}}
</div>
</d.Content>
</ToolTip>
<input
aria-label="command input"
onkeyup={{action "handleKeyUp"}}
value={{this.value}}
autocomplete="off"
spellcheck="false"
/>
<Hds::Button
class="hds-side-nav__icon-button"
{{on "click" (action "fullscreen")}}
{{hds-tooltip (if this.isFullscreen "minimize" "maximize")}}
data-test-tool-tip-trigger
@icon={{if this.isFullscreen "minimize" "maximize"}}
@text={{if this.isFullscreen "Minimize" "Maximize"}}
@isIconOnly={{true}}
/>
</div>
<NamespaceReminder @class="console-reminder" @mode="execute" @noun="command" />

2
ui/app/templates/components/console/log-error-with-html.hbs
View File

@@ -4,7 +4,7 @@
~}}
{{! template-lint-disable no-triple-curlies}}
<div class="console-ui-alert has-text-danger">
<div class="console-ui-alert console-ui-alert--error">
<Icon @name="x-circle-fill" />
<pre>{{{@content}}}</pre>
</div>

2
ui/app/templates/components/console/log-error.hbs
View File

@@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="console-ui-alert has-text-danger">
<div class="console-ui-alert console-ui-alert--error">
<Icon @name="x-circle-fill" />
<pre>{{@content}}</pre>
</div>

2
ui/app/templates/components/console/log-help.hbs
View File

@@ -5,7 +5,7 @@
{{! template-lint-disable no-whitespace-for-layout }}
{{! prettier-ignore }}
<div class="console-ui-alert has-text-grey">
<div class="console-ui-alert">
<Icon @name="info" />
<pre>Usage: vault &lt;command&gt; [args]

2
ui/app/templates/components/console/log-json.hbs
View File

@@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="console-ui-output has-text-grey">
<div class="console-ui-output">
<JsonEditor
@showToolbar={{false}}
@value={{stringify this.content}}

2
ui/app/templates/components/console/log-list.hbs
View File

@@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="console-ui-output has-text-grey">
<div class="console-ui-output">
<pre>
Keys
{{#each this.list as |item|}}

2
ui/app/templates/components/console/log-object.hbs
View File

@@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="console-ui-output has-text-grey">
<div class="console-ui-output">
<pre>{{this.columns}}</pre>
<Hds::Copy::Button
@text="Copy"

2
ui/app/templates/components/console/log-success.hbs
View File

@@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="console-ui-alert has-text-success">
<div class="console-ui-alert console-ui-alert--success">
<Icon @name="check-circle-fill" />
<pre>{{@content}}</pre>
</div>

2
ui/app/templates/components/console/log-text.hbs
View File

@@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<div class="console-ui-output has-text-grey">
<div class="console-ui-output">
<pre>{{@content}}</pre>
<Hds::Copy::Button
@text="Copy"

17
ui/app/templates/components/console/ui-panel.hbs
View File

@@ -15,18 +15,19 @@
</div>
<div class="console-ui-panel-content">
<div class="content has-bottom-margin-l">
<p class="has-text-grey is-font-mono has-bottom-margin-s">
<p class="console-ui-panel-intro is-font-mono has-bottom-margin-s">
The Vault Browser CLI provides an easy way to execute common Vault CLI commands, such as write, read, delete, and list.
It does not include kv v2 write or put commands. For guidance, type `help`.
</p>
<p class="has-text-grey is-font-mono has-bottom-margin-s">Examples:</p>
<p class="has-text-grey is-font-mono">→ Write secrets to kv v1: write &lt;mount&gt;/my-secret foo=bar</p>
<p class="has-text-grey is-font-mono">→ List kv v1 secret keys: list &lt;mount&gt;/</p>
<p class="has-text-grey is-font-mono">→ Read a kv v1 secret: read &lt;mount&gt;/my-secret</p>
<p class="has-text-grey is-font-mono">→ Mount a kv v2 secret engine: write sys/mounts/&lt;mount&gt; type=kv
<p class="console-ui-panel-intro is-font-mono has-bottom-margin-s">Examples:</p>
<p class="console-ui-panel-intro is-font-mono">→ Write secrets to kv v1: write &lt;mount&gt;/my-secret foo=bar</p>
<p class="console-ui-panel-intro is-font-mono">→ List kv v1 secret keys: list &lt;mount&gt;/</p>
<p class="console-ui-panel-intro is-font-mono">→ Read a kv v1 secret: read &lt;mount&gt;/my-secret</p>
<p class="console-ui-panel-intro is-font-mono">→ Mount a kv v2 secret engine: write sys/mounts/&lt;mount&gt; type=kv
options=version=2</p>
<p class="has-text-grey is-font-mono">→ Read a kv v2 secret: kv-get &lt;mount&gt;/secret-path</p>
<p class="has-text-grey is-font-mono">→ Read a kv v2 secret's metadata: kv-get &lt;mount&gt;/secret-path -metadata</p>
<p class="console-ui-panel-intro is-font-mono">→ Read a kv v2 secret: kv-get &lt;mount&gt;/secret-path</p>
<p class="console-ui-panel-intro is-font-mono">→ Read a kv v2 secret's metadata: kv-get &lt;mount&gt;/secret-path
-metadata</p>
</div>
<Console::OutputLog @outputLog={{this.cliLog}} />
<Console::CommandInput

1
ui/app/templates/components/control-group-success.hbs
View File

@@ -60,6 +60,7 @@
autocomplete="off"
spellcheck="false"
name="token"
id="token"
@value={{this.token}}
/>
</div>

2
ui/app/templates/components/dashboard/client-count-card.hbs
View File

@@ -9,7 +9,7 @@
Client count
</h3>
<LinkTo @route="vault.cluster.clients.dashboard" class="is-no-underline">Details</LinkTo>
<LinkTo @route="vault.cluster.clients.dashboard">Details</LinkTo>
</div>
<hr class="has-background-gray-100" />

3
ui/app/templates/components/dashboard/quick-actions-card.hbs
View File

@@ -28,7 +28,7 @@
</div>
{{#if this.selectedEngine}}
<h4 class="title is-6" data-test-card-subtitle="secrets-engines">Action</h4>
<h4 id="action-select-title" class="title is-6" data-test-card-subtitle="secrets-engines">Action</h4>
<Select
@name="action-select"
@options={{this.actionOptions}}
@@ -36,6 +36,7 @@
@selectedValue={{this.selectedAction}}
@onChange={{this.setSelectedAction}}
@noDefault={{true}}
@ariaLabel="Action"
/>
{{#if this.searchSelectParams.model}}

2
ui/app/templates/components/dashboard/replication-card.hbs
View File

@@ -10,7 +10,7 @@
</h3>
{{#if (or @replication.dr.clusterId @replication.performance.clusterId)}}
<LinkTo class="is-no-underline" @route="vault.cluster.replication.index">
<LinkTo @route="vault.cluster.replication.index">
Details
</LinkTo>
{{/if}}

25
ui/app/templates/components/dashboard/secrets-engines-card.hbs
View File

@@ -12,7 +12,7 @@
<h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-card-header="Secrets engines">Secrets engines</h3>
{{#if this.filteredSecretsEngines}}
<LinkTo class="is-no-underline has-right-margin-xxs" @route="vault.cluster.secrets.backends">
<LinkTo class="has-right-margin-xxs" @route="vault.cluster.secrets.backends">
Details
</LinkTo>
{{/if}}
@@ -27,16 +27,12 @@
<div>
<div class="is-flex-center">
{{#if backend.icon}}
<ToolTip @horizontalPosition="left" as |T|>
<T.Trigger>
<Icon @name={{backend.icon}} class={{unless backend.isSupportedBackend "has-text-grey"}} />
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<div class="box">
{{or backend.engineType backend.path}}
</div>
</T.Content>
</ToolTip>
<Icon
@name={{backend.icon}}
@title="{{or backend.engineType backend.path}} type backend"
title={{or backend.engineType backend.path}}
class={{unless backend.isSupportedBackend "has-text-grey"}}
/>
{{/if}}
{{#if backend.path}}
{{#if backend.isSupportedBackend}}
@@ -65,12 +61,7 @@
{{/if}}
</div>
{{#if backend.isSupportedBackend}}
<LinkTo
@route={{backend.backendLink}}
@model={{backend.id}}
class="has-text-weight-semibold is-no-underline"
data-test-view
>
<LinkTo @route={{backend.backendLink}} @model={{backend.id}} class="has-text-weight-semibold" data-test-view>
View
</LinkTo>
{{/if}}

2
ui/app/templates/components/generated-item-list.hbs
View File

@@ -19,7 +19,7 @@
{{#let (tabs-for-auth-section @methodModel "authConfig" @paths) as |tabs|}}
{{#if tabs.length}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation to manage {{@methodModel.id}}">
<ul>
{{#each tabs as |tab|}}
<li>

18
ui/app/templates/components/identity/entity-nav.hbs
View File

@@ -11,14 +11,18 @@
</p.levelLeft>
</PageHeader>
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation for entities">
<ul>
<LinkTo @route="vault.cluster.access.identity.index" @model={{pluralize this.identityType}}>
{{capitalize (pluralize this.identityType)}}
</LinkTo>
<LinkTo @route="vault.cluster.access.identity.aliases.index" @model={{pluralize this.identityType}}>
Aliases
</LinkTo>
<li>
<LinkTo @route="vault.cluster.access.identity.index" @model={{pluralize this.identityType}}>
{{capitalize (pluralize this.identityType)}}
</LinkTo>
</li>
<li>
<LinkTo @route="vault.cluster.access.identity.aliases.index" @model={{pluralize this.identityType}}>
Aliases
</LinkTo>
</li>
</ul>
</nav>
</div>

2
ui/app/templates/components/identity/popup-alias.hbs
View File

@@ -5,7 +5,7 @@
<PopupMenu @name="alias-menu">
{{#let (get this.params "0") as |item|}}
<nav class="menu">
<nav class="menu" aria-label="navigation for managing aliases">
<ul class="menu-list">
<li class="action">
<LinkTo

2
ui/app/templates/components/identity/popup-members.hbs
View File

@@ -4,7 +4,7 @@
~}}
<PopupMenu @name="member-edit-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing identity members">
<ul class="menu-list">
<li class="action">
<ConfirmAction

2
ui/app/templates/components/identity/popup-metadata.hbs
View File

@@ -4,7 +4,7 @@
~}}
<PopupMenu @name="metadata-edit-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing identity metadata">
<ul class="menu-list">
<li class="action">
<ConfirmAction

2
ui/app/templates/components/identity/popup-policy.hbs
View File

@@ -4,7 +4,7 @@
~}}
<PopupMenu @name="policy-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing identity policies">
<ul class="menu-list">
<li class="action">
<LinkTo @route="vault.cluster.policy.show" @models={{array "acl" this.policyName}}>

2
ui/app/templates/components/keymgmt/key-edit.hbs
View File

@@ -27,7 +27,7 @@
{{else}}
{{#if (eq this.mode "show")}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless" data-test-keymgmt-key-toolbar>
<nav class="tabs">
<nav class="tabs" aria-label="navigation for managing keys">
<ul>
<li class={{if (not-eq @tab "versions") "active"}}>
<LinkTo

7
ui/app/templates/components/keymgmt/provider-edit.hbs
View File

@@ -26,7 +26,7 @@
{{else}}
{{#if this.isShowing}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation for managing providers">
<ul>
<li class={{unless this.viewingKeys "active"}} data-test-kms-provider-tab="details">
<LinkTo @route="vault.cluster.secrets.backend.show" @model={{@model.id}} @query={{hash tab=""}}>
@@ -44,7 +44,10 @@
</nav>
</div>
{{#unless this.viewingKeys}}
<Toolbar data-test-kms-provider-details-actions>
<Toolbar
data-test-kms-provider-details-actions
aria-label="options for managing for key/management provider {{@model.id}}"
>
<ToolbarActions>
{{#if @model.canDelete}}
<ConfirmAction

4
ui/app/templates/components/link-status.hbs
View File

@@ -8,9 +8,7 @@
<A.Title data-test-link-status>
{{#if (eq this.state "connected")}}
This self-managed Vault is linked to
<ExternalLink @href="https://portal.cloud.hashicorp.com/sign-in">
HCP.
</ExternalLink>
<Hds::Link::Inline @href="https://portal.cloud.hashicorp.com/sign-in">HCP.</Hds::Link::Inline>
{{else}}
Error connecting to HCP
{{/if}}

2
ui/app/templates/components/mfa/login-enforcement-list-item.hbs
View File

@@ -20,7 +20,7 @@
<div class="level-right is-flex is-paddingless is-marginless">
<div class="level-item">
<PopupMenu>
<nav class="menu">
<nav class="menu" aria-label="navigation for managing login enforcements">
<ul class="menu-list">
<li>
<LinkTo

2
ui/app/templates/components/mfa/method-list-item.hbs
View File

@@ -31,7 +31,7 @@
<div class="level-right is-flex is-paddingless is-marginless">
<div class="level-item">
<PopupMenu>
<nav class="menu">
<nav class="menu" aria-label="navigation for managing MFA methods">
<ul class="menu-list">
<li>
<LinkTo

2
ui/app/templates/components/mfa/mfa-form.hbs
View File

@@ -50,7 +50,7 @@
{{! template-lint-enable no-autofocus-attribute}}
</div>
{{else if (eq constraint.methods.length 1)}}
<p class="has-text-grey-400" data-test-mfa-push-instruction>
<p class="has-text-grey-light" data-test-mfa-push-instruction>
Check device for push notification
</p>
{{/if}}

5
ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
View File

@@ -17,6 +17,7 @@
disabled={{not @model.isNew}}
class="input field {{if this.errors.name.errors 'has-error-border'}}"
data-test-mlef-input="name"
id="name"
{{on "input" (pipe (pick "target.value") (fn (mut @model.name)))}}
/>
{{#if this.errors.name.errors}}
@@ -84,7 +85,9 @@
@valueAttribute="type"
@selectedValue={{this.selectedTargetType}}
@onChange={{this.onTargetSelect}}
@name="target-type"
data-test-mlef-select="target-type"
aria-label="Target type"
/>
<div class="has-left-margin-s is-flex-grow-1">
{{#if (eq this.selectedTargetType "accessor")}}
@@ -105,7 +108,9 @@
@noDefault={{true}}
@selectedValue={{this.selectedTargetValue}}
@onChange={{this.setTargetValue}}
@name="Auth method"
data-test-mlef-select="auth-method"
aria-label="Auth method"
/>
{{else}}
<SearchSelect

2
ui/app/templates/components/mfa/nav.hbs
View File

@@ -4,7 +4,7 @@
~}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation for managing MFA">
<ul>
<LinkTo @route="vault.cluster.access.mfa.methods" data-test-tab="methods">
Methods

8
ui/app/templates/components/mount-accessor-select.hbs
View File

@@ -21,7 +21,13 @@
{{else if this.authMethods.last.value}}
<div class="control is-expanded">
<div class="select is-fullwidth">
<select name={{@name}} id={{@name}} {{on "change" this.change}} data-test-mount-accessor-select>
<select
aria-label={{or @label "Select a mount accessor"}}
name={{@name}}
id={{@name}}
{{on "change" this.change}}
data-test-mount-accessor-select
>
{{#if this.noDefault}}
<option value="">Select one</option>
{{/if}}

1
ui/app/templates/components/oidc/assignment-form.hbs
View File

@@ -15,6 +15,7 @@
class="input field {{if this.modelValidations.name.errors 'has-error-border'}}"
{{on "input" this.handleOperation}}
data-test-input="name"
id="name"
/>
{{#if this.modelValidations.name.errors}}
<AlertInline @type="danger" @message={{join ", " this.modelValidations.name.errors}} />

2
ui/app/templates/components/oidc/client-form.hbs
View File

@@ -37,7 +37,7 @@
</div>
{{! RADIO CARD + SEARCH SELECT }}
<div class="box is-sideless is-fullwidth is-marginless has-top-padding-xxl">
<h4 class="title is-4">Assign access</h4>
<Hds::Text::Display @tag="h2" @size="400">Assign access</Hds::Text::Display>
<div class="is-flex-row">
<RadioCard
data-test-oidc-radio="allow-all"

2
ui/app/templates/components/oidc/client-list.hbs
View File

@@ -25,7 +25,7 @@
<div class="level-right is-flex is-paddingless is-marginless">
<div class="level-item">
<PopupMenu>
<nav class="menu">
<nav class="menu" aria-label="navigation for managing OIDC client {{client.name}}">
<ul class="menu-list">
<li>
<LinkTo

2
ui/app/templates/components/oidc/key-form.hbs
View File

@@ -31,7 +31,7 @@
</div>
{{! RADIO CARD + SEARCH SELECT }}
<div class="box is-sideless is-fullwidth is-marginless has-top-padding-xxl">
<h4 class="title is-4">Allowed applications</h4>
<Hds::Text::Display @tag="h2" @size="400">Allowed applications</Hds::Text::Display>
<div class="is-flex-row">
<RadioCard
data-test-oidc-radio="allow-all"

2
ui/app/templates/components/oidc/provider-form.hbs
View File

@@ -65,7 +65,7 @@
</div>
{{! RADIO CARD + SEARCH SELECT }}
<div class="box is-sideless is-fullwidth is-marginless has-top-padding-xxl">
<h4 class="title is-4">Allowed applications</h4>
<Hds::Text::Display @tag="h2" @size="400">Allowed applications</Hds::Text::Display>
<div class="is-flex-row">
<RadioCard
data-test-oidc-radio="allow-all"

2
ui/app/templates/components/oidc/provider-list.hbs
View File

@@ -25,7 +25,7 @@
<div class="level-right is-flex is-paddingless is-marginless">
<div class="level-item">
<PopupMenu>
<nav class="menu">
<nav class="menu" aria-label="navigation for managing provider {{provider.name}}">
<ul class="menu-list">
<li>
<LinkTo

3
ui/app/templates/components/pgp-file.hbs
View File

@@ -38,9 +38,10 @@
class="textarea"
oninput={{action "updateData"}}
data-test-pgp-file-textarea={{true}}
aria-labelledby={{concat "pgpFileTextarea-" this.elementId}}
>{{this.key.value}}</textarea>
</div>
<p class="help has-text-grey">
<p class="help has-text-grey" id={{concat "pgpFileTextarea-" this.elementId}}>
{{#if this.textareaHelpText}}
{{this.textareaHelpText}}
{{else}}

6
ui/app/templates/components/secret-edit-toolbar.hbs
View File

@@ -4,9 +4,9 @@
~}}
{{! template-lint-configure simple-unless "warn" }}
<Toolbar>
<Toolbar aria-label="manage secret">
{{#unless (and (eq @mode "show") @isWriteWithoutRead)}}
<ToolbarFilters>
<ToolbarFilters aria-label="manage view">
<Toggle
@name="json"
@disabled={{and (eq @mode "show") @secretDataIsAdvanced}}
@@ -17,7 +17,7 @@
</Toggle>
</ToolbarFilters>
{{/unless}}
<ToolbarActions>
<ToolbarActions aria-label="actions for {{@model.id}}">
{{#if (and (eq @mode "show") @model.canDelete)}}
<ConfirmAction
@buttonText="Delete"

10
ui/app/templates/components/secret-edit.hbs
View File

@@ -29,11 +29,13 @@
{{! tabs for show only }}
{{#if (eq @mode "show")}}
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation for secret management">
<ul>
<LinkTo @route="vault.cluster.secrets.backend.show" @model={{@key.id}} data-test-secret-tab>
Secret
</LinkTo>
<li>
<LinkTo @route="vault.cluster.secrets.backend.show" @model={{@key.id}} data-test-secret-tab>
Secret
</LinkTo>
</li>
</ul>
</nav>
</div>

2
ui/app/templates/components/secret-list/aws-role-item.hbs
View File

@@ -24,7 +24,7 @@
</div>
<div class="column has-text-right">
<PopupMenu @name="role-aws-nav" @contentClass="is-wide">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing A-W-S role {{@item.id}}">
<ul class="menu-list">
{{#if @item.generatePath.isPending}}
<li class="action">

2
ui/app/templates/components/secret-list/database-list-item.hbs
View File

@@ -27,7 +27,7 @@
</div>
<div class="column has-text-right">
<PopupMenu name="secret-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing database {{@item.id}}">
<ul class="menu-list">
{{#if @item.canEdit}}
<li class="action">

2
ui/app/templates/components/secret-list/item.hbs
View File

@@ -31,7 +31,7 @@
</div>
<div class="column has-text-right">
<PopupMenu name="secret-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing {{@item.id}}">
<ul class="menu-list">
{{#if @item.isFolder}}
<SecretLink @mode="list" @secret={{@item.id}} class="has-text-black has-text-weight-semibold">

2
ui/app/templates/components/secret-list/ssh-role-item.hbs
View File

@@ -37,7 +37,7 @@
<div class="column has-text-right">
{{#if (eq @backendType "ssh")}}
<PopupMenu @name="role-ssh-nav">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing SSH role {{@item.id}}">
<ul class="menu-list">
{{#if (eq @item.keyType "otp")}}
{{#if @item.generatePath.isPending}}

2
ui/app/templates/components/secret-list/transform-list-item.hbs
View File

@@ -26,7 +26,7 @@
<div class="column has-text-right">
{{#if (or @item.updatePath.canRead @item.updatePath.canUpdate)}}
<PopupMenu name="secret-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing transformation item {{@itemPath}}">
<ul class="menu-list">
{{#if @item.updatePath.canRead}}
<li class="action">

2
ui/app/templates/components/secret-list/transform-transformation-item.hbs
View File

@@ -26,7 +26,7 @@
</div>
<div class="column has-text-right">
{{#if (or @item.updatePath.canRead @item.updatePath.canUpdate)}}
<PopupMenu name="secret-menu">
<PopupMenu name="secret-menu" aria-label={{concat "navigation for managing transformation " @item.id}}>
<nav class="menu">
<ul class="menu-list">
{{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}

2
ui/app/templates/components/section-tabs.hbs
View File

@@ -6,7 +6,7 @@
{{#let (tabs-for-auth-section this.model this.tabType this.paths) as |tabs|}}
{{#if tabs.length}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation to manage {{this.model.type}}">
<ul>
{{#each tabs as |tab|}}
<li>

16
ui/app/templates/components/transform-show-transformation.hbs
View File

@@ -42,7 +42,13 @@
</div>
<div class="copy-text level">
{{#let (concat "vault write " this.model.backend "/encode/" this.cliCommand) as |copyEncodeCommand|}}
<CodeSnippet @codeBlock={{copyEncodeCommand}} @isIconOnly={{true}} />
<Hds::CodeBlock
@language="bash"
@hasLineNumbers={{false}}
@hasLineWrapping={{true}}
@hasCopyButton={{true}}
@value={{copyEncodeCommand}}
/>
{{/let}}
</div>
</div>
@@ -56,7 +62,13 @@
</div>
<div class="copy-text level">
{{#let (concat "vault write " this.model.backend "/decode/" this.cliCommand) as |copyDecodeCommand|}}
<CodeSnippet @codeBlock={{copyDecodeCommand}} @isIconOnly={{true}} />
<Hds::CodeBlock
@language="bash"
@hasLineNumbers={{false}}
@hasLineWrapping={{true}}
@hasCopyButton={{true}}
@value={{copyDecodeCommand}}
/>
{{/let}}
</div>
</div>

2
ui/app/templates/components/transform-template-edit.hbs
View File

@@ -127,7 +127,7 @@
<div>
{{#each-in this.model.decodeFormats as |key value|}}
<div class="transform-decode-formats">
<p class="is-label has-text-grey-400">{{key}}</p>
<p class="is-label has-text-grey-light">{{key}}</p>
<p>{{value}}</p>
</div>
{{/each-in}}

2
ui/app/templates/components/transit-form-show.hbs
View File

@@ -4,7 +4,7 @@
~}}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs" aria-label="tabs">
<nav class="tabs" aria-label="navigation to manage transit backend">
<ul>
<li class={{if (eq @tab "actions") "is-active"}}>
<SecretLink

2
ui/app/templates/components/wizard-content.hbs
View File

@@ -6,7 +6,7 @@
<div class="wizard-header">
{{#unless this.hidePopup}}
<PopupMenu @class="wizard-dismiss-menu">
<nav class="menu">
<nav class="menu" aria-label="navigation for wizard content">
<ul class="menu-list">
<li class="action">
<Hds::Button @text="Dismiss" @color="secondary" class="link" {{on "click" (action "dismissWizard")}} />

2
ui/app/templates/error.hbs
View File

@@ -34,7 +34,7 @@
</p>
<div class="is-flex-between has-top-margin-s">
<ExternalLink @href="/" @sameTab={{true}} class="is-no-underline is-flex-center has-text-semibold">
<ExternalLink @href="/" @sameTab={{true}} class="is-flex-center has-text-semibold">
<Chevron @direction="left" />
Go home
</ExternalLink>

2
ui/app/templates/vault/cluster/access/identity/aliases/show.hbs
View File

@@ -20,7 +20,7 @@
</p.levelLeft>
</PageHeader>
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs sub-nav" aria-label="tabs">
<nav class="tabs sub-nav" aria-label="navigation for managing identity alias">
<ul>
{{#each (tabs-for-identity-show this.model.identityType) as |tab|}}
<LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array this.model.id tab}}>

21
ui/app/templates/vault/cluster/access/identity/index.hbs
View File

@@ -33,7 +33,7 @@
</div>
<div class="column has-text-right">
<PopupMenu @name="identity-item" @onOpen={{action "reloadRecord" item}}>
<nav class="menu">
<nav class="menu" aria-label="navigation for managing identity">
<ul class="menu-list">
<li class="action">
<LinkTo @route="vault.cluster.access.identity.show" @models={{array item.id "details"}}>
@@ -110,12 +110,17 @@
this.identityType
}} in this namespace will be listed here. Create your first {{this.identityType}} to get started."
>
<LinkTo @route="vault.cluster.access.identity.create" @model={{pluralize this.identityType}} class="link">
Create
{{this.identityType}}
</LinkTo>
<DocLink @path="/vault/tutorials/auth-methods/identity">
Learn more
</DocLink>
<Hds::Link::Standalone
@text="Create {{this.identityType}}"
@icon="plus"
@route="vault.cluster.access.identity.create"
@model={{pluralize this.identityType}}
/>
<Hds::Link::Standalone
@text="Identity: entities and groups tutorial"
@href={{doc-link "/vault/tutorials/auth-methods/identity"}}
@icon="learn-link"
@iconPosition="trailing"
/>
</EmptyState>
{{/if}}

2
ui/app/templates/vault/cluster/access/identity/show.hbs
View File

@@ -20,7 +20,7 @@
</p.levelLeft>
</PageHeader>
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless">
<nav class="tabs sub-nav" aria-label="tabs">
<nav class="tabs sub-nav" aria-label="navigation for managing {{this.model.identityType}}">
<ul>
{{#each (tabs-for-identity-show this.model.identityType this.model.type) as |tab|}}
<LinkTo

29
ui/app/templates/vault/cluster/access/methods.hbs
View File

@@ -55,23 +55,16 @@
<div class="level is-mobile">
<div class="level-left">
<div>
<ToolTip @horizontalPosition="left" as |T|>
<T.Trigger>
<Icon
@name={{if
(or (find-by "type" method.methodType (mountable-auth-methods)) (eq method.methodType "token"))
method.methodType
"auth"
}}
class="has-text-grey-light"
/>
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<div class="box">
{{method.methodType}}
</div>
</T.Content>
</ToolTip>
<Hds::TooltipButton @text={{method.methodType}} aria-label="Type of auth mount">
<Icon
@name={{if
(or (find-by "type" method.methodType (mountable-auth-methods)) (eq method.methodType "token"))
method.methodType
"auth"
}}
class="has-text-grey-light"
/>
</Hds::TooltipButton>
<span data-test-path data-test-id={{method.id}} class="has-text-weight-semibold has-text-black">
{{method.path}}
</span>
@@ -84,7 +77,7 @@
<div class="level-right is-flex is-paddingless is-marginless">
<div class="level-item">
<PopupMenu @name="auth-backend-nav">
<nav class="menu">
<nav class="menu" aria-label="navigation for managing access method {{method.id}}">
<ul class="menu-list">
<li>
<LinkTo @route="vault.cluster.access.method.section" @models={{array method.id "configuration"}}>

4
ui/app/templates/vault/cluster/access/mfa/index.hbs
View File

@@ -16,9 +16,7 @@
Configure and enforce multi-factor authentication (MFA) for users logging into Vault, for any
<br />
authentication method.
<DocLink @path="/vault/tutorials/auth-methods/multi-factor-authentication">
Learn more
</DocLink>
<Hds::Link::Inline @href={{doc-link "/vault/tutorials/auth-methods/multi-factor-authentication"}}>Learn more</Hds::Link::Inline>
</p>
<Hds::Button @text="Configure MFA" @route="vault.cluster.access.mfa.methods.create" data-test-mfa-configure />
</div>

12
ui/app/templates/vault/cluster/access/namespaces/index.hbs
View File

@@ -23,13 +23,13 @@
<ListView @items={{this.model}} @itemNoun="namespace" @paginationRouteName="vault.cluster.access.namespaces" as |list|>
{{#if list.empty}}
<list.empty>
<LinkTo @route="vault.cluster.access.namespaces.create">
Create Namespace
</LinkTo>
<Hds::Link::Standalone @icon="plus" @text="Create Namespace" @route="vault.cluster.access.namespaces.create" />
<DocLink @path="/vault/tutorials/enterprise/namespaces">
Learn more
</DocLink>
<Hds::Link::Standalone
@icon="docs-link"
@text="Learn more"
@href={{doc-link "/vault/tutorials/enterprise/namespaces"}}
/>
</list.empty>
{{else}}
<ListItem as |Item|>

6
ui/app/templates/vault/cluster/access/oidc.hbs
View File

@@ -20,9 +20,7 @@
<br />
{{/if}}
methods and source of identity to any client applications.
<DocLink @path="/vault/tutorials/auth-methods/oidc-identity-provider">
Learn more
</DocLink>
<Hds::Link::Inline @href={{doc-link "/vault/tutorials/auth-methods/oidc-identity-provider"}}>Learn more</Hds::Link::Inline>
</p>
{{#if this.isCta}}
<Hds::Button
@@ -35,7 +33,7 @@
{{#unless this.isCta}}
{{! show tab links in list routes }}
<div class="tabs-container box is-sideless is-fullwidth is-paddingless is-marginless" data-test-oidc-tabs>
<nav class="tabs">
<nav class="tabs" aria-label="navigation for managing Open ID Connect">
<ul>
<LinkTo @route="vault.cluster.access.oidc.clients" data-test-tab="clients">
Applications

2
ui/app/templates/vault/cluster/clients.hbs
View File

@@ -12,7 +12,7 @@
</PageHeader>
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
<nav class="tabs">
<nav class="tabs" aria-label="navigation for managing client counts">
<ul>
<LinkTo @route="vault.cluster.clients.dashboard" data-test-dashboard>
Dashboard

13
ui/app/templates/vault/cluster/secrets/backends.hbs
View File

@@ -56,16 +56,9 @@
<div>
<div class="has-text-grey">
{{#if backend.icon}}
<ToolTip @horizontalPosition="left" as |T|>
<T.Trigger>
<Icon @name={{backend.icon}} class="has-text-grey-light" />
</T.Trigger>
<T.Content @defaultClass="tool-tip">
<div class="box">
{{or backend.engineType backend.path}}
</div>
</T.Content>
</ToolTip>
<Hds::TooltipButton @text={{or backend.engineType backend.path}} aria-label="Type of backend">
<Icon @name={{backend.icon}} class="has-text-grey-light" />
</Hds::TooltipButton>
{{/if}}
{{#if backend.path}}
{{#if backend.isSupportedBackend}}

2
ui/app/templates/vault/error.hbs
View File

@@ -38,7 +38,7 @@
</p>
<div class="is-flex-between has-top-margin-s">
<ExternalLink @href="/" @sameTab={{true}} class="is-no-underline is-flex-center has-text-semibold">
<ExternalLink @href="/" @sameTab={{true}} class="is-flex-center has-text-semibold">
<Chevron @direction="left" />
Go home
</ExternalLink>

3
ui/lib/core/addon/components/autocomplete-input.hbs
View File

@@ -5,7 +5,7 @@
<div {{did-insert this.setElement}} ...attributes>
{{#if @label}}
<FormFieldLabel @label={{@label}} @subText={{@subText}} />
<FormFieldLabel @label={{@label}} @subText={{@subText}} for={{dasherize @label}} />
{{/if}}
<div class="control">
<Input
@@ -15,6 +15,7 @@
placeholder={{@placeholder}}
class="input"
{{on "input" this.onInput}}
id={{dasherize @label}}
/>
<BasicDropdown @registerAPI={{this.setDropdownAPI}} @renderInPlace={{true}} as |D|>
<D.Content @defaultClass="autocomplete-input">

20
ui/lib/core/addon/components/code-snippet.hbs
View File

@@ -1,20 +0,0 @@
{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
<div
class="has-padding-s has-background-gray-900 border-radius-4 is-flex-between is-flex-center"
data-test-code-snippet
...attributes
>
<code class="has-text-white is-size-7">{{@codeBlock}}</code>
<Hds::Copy::Button
class="has-text-grey-light transparent icon-grey-300"
@text="Copy"
@textToCopy={{or @clipboardCode @codeBlock}}
@isIconOnly={{@isIconOnly}}
@container={{@container}}
data-test-copy-button={{or @clipboardCode @codeBlock}}
/>
</div>

5
ui/lib/core/addon/components/confirmation-modal.hbs
View File

@@ -14,11 +14,11 @@
<p class="has-text-weight-semibold is-size-6">
Confirm
</p>
<p class="sub-text has-top-bottom-margin-xxs">Type
<label class="sub-text has-top-bottom-margin-xxs" for={{concat "confirm-" (dasherize this.confirmText)}}>Type
<strong>{{this.confirmText}}</strong>
to confirm
{{@toConfirmMsg}}
</p>
</label>
<Input
@type="text"
@value={{this.confirmationInput}}
@@ -27,6 +27,7 @@
autocomplete="off"
spellcheck="false"
data-test-confirmation-modal-input={{@title}}
id={{concat "confirm-" (dasherize this.confirmText)}}
/>
</div>
</M.Body>

3
ui/lib/core/addon/components/copy-secret-dropdown.hbs
View File

@@ -32,7 +32,8 @@
<Hds::Button
@text="Wrap secret"
@color="secondary"
class="link"
@isFullWidth={{true}}
class="in-dropdown link is-flex-start"
{{on "click" @onWrap}}
data-test-wrap-button
/>

8
ui/lib/core/addon/components/empty-state.hbs
View File

@@ -8,9 +8,9 @@
{{#if @icon}}
<div class="empty-state-icon">
<Icon @name={{@icon}} @size="24" />
<h3 class="empty-state-title" data-test-empty-state-title>
<p class="empty-state-title" data-test-empty-state-title>
{{@title}}
</h3>
</p>
</div>
{{#if @subTitle}}
<p class="empty-state-subTitle" data-test-empty-state-subText>
@@ -18,9 +18,9 @@
</p>
{{/if}}
{{else}}
<h3 class={{concat "empty-state-title" (if @subTitle " has-bottom-margin-m")}} data-test-empty-state-title>
<p class={{concat "empty-state-title" (if @subTitle " has-bottom-margin-m")}} data-test-empty-state-title>
{{@title}}
</h3>
</p>
{{#if @subTitle}}
<p class="empty-state-subTitle" data-test-empty-state-subText>
{{@subTitle}}

2
ui/lib/core/addon/components/enable-input.hbs
View File

@@ -11,7 +11,7 @@
{{#if @attr}}
<ReadonlyFormField @attr={{@attr}} @value="**********" />
{{else}}
<Input disabled class="input" @type="text" @value="**********" />
<Input aria-label={{@label}} readonly class="input" @type="text" @value="**********" />
{{/if}}
</div>
<div class="align-self-end">

8
ui/lib/core/addon/components/enable-input.ts
View File

@@ -8,6 +8,7 @@ import { tracked } from '@glimmer/tracking';
interface Args {
attr?: AttrData;
label?: string;
}
interface AttrData {
name: string; // required if @attr is passed
@@ -29,13 +30,14 @@ interface AttrData {
<EnableInput class="field" @attr={{attr}}>
<FormField @attr={{attr}} @model={{@destination}} @modelValidations={{this.modelValidations}} />
</EnableInput>
// without passing @attr
<EnableInput>
<EnableInput @label="AWS password">
<Input @type="text" />
</EnableInput>
* @param {object} [attr] - used to generate label for `ReadonlyFormField`, `name` key is required. Can be an attribute from a model exported with expandAttributeMeta.
* @param {string} [label] - required if no attr passed. Used to ensure a11y conformance for the readonly input.
*/
export default class EnableInputComponent extends Component<Args> {

1
ui/lib/core/addon/components/form-field.hbs
View File

@@ -96,6 +96,7 @@
@value={{date-format (get @model this.valuePath) "yyyy-MM-dd'T'HH:mm"}}
class="input has-top-margin-xs is-auto-width is-block"
name={{@attr.name}}
id={{@attr.name}}
data-test-input={{@attr.name}}
{{on "change" this.onChangeWithEvent}}
/>

2
ui/lib/core/addon/components/icon.hbs
View File

@@ -6,7 +6,7 @@
{{#if this.isFlightIcon}}
<FlightIcon @name={{this.name}} @size={{this.size}} @stretched={{@stretched}} ...attributes />
{{else}}
<span class="hs-icon {{this.hsIconClass}}" ...attributes>
<span class="hs-icon {{this.hsIconClass}}" aria-hidden="true" ...attributes>
{{svg-jar this.name}}
</span>
{{/if}}

3
ui/lib/core/addon/components/info-tooltip.hbs
View File

@@ -17,8 +17,9 @@
class="tool-tip-trigger button is-ghost is-compact"
data-test-tool-tip-trigger={{true}}
{{on "click" this.preventSubmit}}
aria-label="help"
>
<Icon @name="info" class="auto-width" aria-label="help" />
<Icon @name="info" class="auto-width" />
</d.Trigger>
<d.Content @defaultClass="tool-tip">
<div class="box" data-test-info-tooltip-content>

8
ui/lib/core/addon/components/json-editor.hbs
View File

@@ -6,14 +6,14 @@
<div ...attributes>
{{#if this.getShowToolbar}}
<div data-test-component="json-editor-toolbar">
<Toolbar>
<label class="has-text-weight-bold" data-test-component="json-editor-title">
<Toolbar aria-label="items for managing JSON editor for {{@title}}">
<label id="json-editor-title" class="has-text-weight-bold" data-test-component="json-editor-title">
{{@title}}
{{#if @subTitle}}
<span class="is-size-9 is-lowercase has-text-grey">({{@subTitle}})</span>
<span class="is-size-9 is-lowercase has-text-grey-light">({{@subTitle}})</span>
{{/if}}
</label>
<ToolbarActions>
<ToolbarActions aria-label="actions for {{@title}} JSON editor">
{{yield}}
{{#if @example}}
<Hds::Button

Some files were not shown because too many files have changed in this diff Show More