dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/components/form/BannerSettings.vue

@@ -5,6 +5,9 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { RadioGroup } from '@components/Form/Radio';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import { TextAreaAutoGrow } from '@components/Form/TextArea';
+import { Banner } from '@components/Banner';
 
 export default ({
   name: 'BannerSettings',
@@ -28,12 +31,13 @@ export default ({
   },
 
   components: {
-    Checkbox, ColorInput, LabeledInput, LabeledSelect, RadioGroup
+    Banner, Checkbox, ColorInput, LabeledInput, LabeledSelect, RadioGroup, TextAreaAutoGrow, ToggleSwitch
   },
 
   data() {
     const showAsDialog = !!this.value[this.bannerType]?.button || false;
     const buttonText = this.value[this.bannerType]?.button || this.t('banner.showAsDialog.defaultButtonText');
+    const isHtml = !!this.value[this.bannerType]?.html; // HTML display if the 'html' field is set (otherwise default is text)
 
     return {
       showAsDialog,
@@ -42,7 +46,9 @@ export default ({
       themeVars:               {
         bannerBgColor:   getComputedStyle(document.body).getPropertyValue('--default'),
         bannerTextColor: getComputedStyle(document.body).getPropertyValue('--banner-text-color')
-      }
+      },
+      bannerTitleId: `describe-banners-${ this.bannerType }-id`,
+      isHtml,
     };
   },
 
@@ -59,6 +65,12 @@ export default ({
       if (neu !== old) {
         this.value[this.bannerType].button = neu;
       }
+    },
+
+    isHtml(neu, old) {
+      if (neu !== old) {
+        this.value[this.bannerType].isHtml = neu; // Keep track of the content type (this is not persisted)
+      }
     }
   },
 
@@ -104,15 +116,54 @@ export default ({
 </script>
 
 <template>
-  <div class="row">
-    <div class="col span-12">
-      <div class="row">
-        <div class="col span-5">
+  <div>
+    <div class="row">
+      <div class="col span-6">
+        <ColorInput
+          v-model:value="value[bannerType].color"
+          :default-value="themeVars.bannerTextColor"
+          :label="t('banner.textColor')"
+          :mode="mode"
+          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.textColor')}`"
+        />
+      </div>
+      <div class="col span-6">
+        <ColorInput
+          v-model:value="value[bannerType].background"
+          :default-value="themeVars.bannerBgColor"
+          :label="t('banner.background')"
+          :mode="mode"
+          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.background')}`"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <ToggleSwitch
+        v-model:value="isHtml"
+        :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.toggleTextHtml')}`"
+        :data-testid="`banner_content_type_toggle${bannerType}`"
+        :disabled="isUiDisabled"
+        :off-label="t('banner.type.text')"
+        :on-label="t('banner.type.html')"
+      />
+    </div>
+    <div v-if="!isHtml">
+      <div
+        class="row"
+      >
+        <p
+          :id="bannerTitleId"
+          class="sr-only"
+        >
+          {{ t(`banner.${bannerType}`) }}
+        </p>
+        <div class="col span-6">
           <LabeledInput
             v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
             :label="t('banner.text')"
             type="multiline"
+            :aria-describedby="bannerTitleId"
           />
           <p
             v-if="isConsentBanner"
@@ -120,26 +171,20 @@ export default ({
           >
             {{ t('banner.consentFootnote') }}
           </p>
-          <div
-            v-if="isConsentBanner"
-            class="mt-10"
-          >
-            <Checkbox
-              v-model:value="showAsDialog"
-              name="bannerDecoration"
-              class="banner-decoration-checkbox"
-              :mode="mode"
-              :label="t('banner.showAsDialog.label')"
-              :tooltip="t('banner.showAsDialog.tooltip')"
-            />
-            <LabeledInput
-              v-model:value="buttonText"
-              :disabled="!showAsDialog || isUiDisabled"
-              :label="t('banner.buttonText')"
-            />
-          </div>
         </div>
-        <div class="col span-2">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model:value="value[bannerType].fontSize"
+            :data-testid="`banner_font_size_options${bannerType}`"
+            :disabled="isUiDisabled"
+            :label="t('banner.bannerFontSize.label')"
+            :options="uiBannerFontSizeOptions"
+            :aria-describedby="bannerTitleId"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-6">
           <RadioGroup
             v-model:value="value[bannerType].textAlignment"
             name="bannerAlignment"
@@ -148,12 +193,13 @@ export default ({
             :options="radioOptions.options"
             :labels="radioOptions.labels"
             :mode="mode"
+            :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.bannerAlignment.label')}`"
           />
         </div>
-        <div class="col span-2">
-          <h3>
+        <div style="display: flex;" class="col span-6">
+          <p style="width: 160px;" id="decoration-banner-title-id">
             {{ t('banner.bannerDecoration.label') }}
-          </h3>
+          </p>
           <div style="display: flex;">
             <div
               v-for="(o, i) in textDecorationOptions"
@@ -166,35 +212,56 @@ export default ({
                 class="banner-decoration-checkbox"
                 :mode="mode"
                 :label="o.label"
+                :aria-describedby="`${bannerTitleId} decoration-banner-title-id`"
               />
             </div>
           </div>
         </div>
-        <div class="col span-2">
-          <LabeledSelect
-            v-model:value="value[bannerType].fontSize"
-            :data-testid="`banner_font_size_options${bannerType}`"
-            :disabled="isUiDisabled"
-            :label="t('banner.bannerFontSize.label')"
-            :options="uiBannerFontSizeOptions"
-          />
-        </div>
       </div>
-      <div class="row mt-10">
-        <div class="col span-5">
-          <ColorInput
-            v-model:value="value[bannerType].color"
-            :default-value="themeVars.bannerTextColor"
-            :label="t('banner.textColor')"
+    </div>
+    <div
+      v-else
+      class="row"
+    >
+      <div class="col span-12">
+        <Banner
+          :disabled="isUiDisabled"
+          color="warning"
+        >
+          {{ t('banner.htmlWarning') }}
+        </Banner>
+        <TextAreaAutoGrow
+          v-model:value="value[bannerType].html"
+          :aria-label="`${t(`banner.${bannerType}`)} ${t('banner.htmlContent')}`"
+          :data-testid="`banner_html${bannerType}`"
+          :min-height="64"
+          :disabled="isUiDisabled"
+          :placeholder="t('banner.type.html')"
+        />
+      </div>
+    </div>
+    <div
+      v-if="isConsentBanner"
+      class="row"
+    >
+      <div class="col span-6">
+        <div class="mt-10">
+          <Checkbox
+            v-model:value="showAsDialog"
+            name="bannerShowAsDialog"
+            class="banner-decoration-checkbox"
+            :data-testid="`banner_show_as_dialog_checkbox${bannerType}`"
             :mode="mode"
+            :label="t('banner.showAsDialog.label')"
+            :tooltip="t('banner.showAsDialog.tooltip')"
+            :aria-describedby="bannerTitleId"
           />
-        </div>
-        <div class="col span-7">
-          <ColorInput
-            v-model:value="value[bannerType].background"
-            :default-value="themeVars.bannerBgColor"
-            :label="t('banner.background')"
-            :mode="mode"
+          <LabeledInput
+            v-model:value="buttonText"
+            :data-testid="`banner_accept_button${bannerType}`"
+            :disabled="!showAsDialog || isUiDisabled"
+            :label="t('banner.buttonText')"
+            :aria-describedby="bannerTitleId"
           />
         </div>
       </div>

package/components/form/ChangePassword.vue

@@ -331,15 +331,17 @@ export default {
           :value="username"
           tabindex="-1"
           :data-lpignore="!isChange"
+          aria-hidden="true"
         >
         <input
           id="password"
           type="password"
           name="password"
-          autocomplete="password"
+          autocomplete="new-password"
           :value="password"
           tabindex="-1"
           :data-lpignore="!isChange"
+          aria-hidden="true"
         >
         <Password
           v-if="isChange"

package/components/form/ColorInput.vue

@@ -4,6 +4,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 export default {
   emits: ['update:value'],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:    String,
@@ -67,6 +69,23 @@ export default {
       const disabled = this.disabled;
 
       return this.mode !== this.editMode || disabled;
+    },
+
+    ariaLabel() {
+      // We allow override with $attrs['aria-label'] for more control
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'];
+      } else if (this.labelKey) {
+        return this.t(this.labelKey);
+      } else if (this.label) {
+        return this.label;
+      } else {
+        return this.t('generic.colorPicker');
+      }
+    },
+
+    ariaDescribedBy() {
+      return this.$attrs['aria-describedby'] || undefined;
     }
   },
 
@@ -99,11 +118,20 @@ export default {
     @keydown.space.prevent
     @keyup.enter.space.stop="handleKeyup($event)"
   >
-    <label class="text-label"><t
-      v-if="labelKey"
-      :k="labelKey"
-      :raw="true"
-    />{{ label }}</label>
+    <!-- let make "label" not to be picked up by screen readers -->
+    <!-- because it's already included in aria-label (sr's announced it twice) -->
+    <label
+      v-if="labelKey || label"
+      class="text-label"
+      aria-hidden="true"
+    >
+      <t
+        v-if="labelKey"
+        :k="labelKey"
+        :raw="true"
+      />
+      <template v-else-if="label">{{ label }}</template>
+    </label>
     <div
       :data-testid="componentTestid + '-color-input_preview-container'"
       :class="{[mode]:mode, disabled: isDisabled}"
@@ -118,7 +146,8 @@ export default {
           style="margin-bottom: 6px;"
           ref="input"
           :aria-disabled="isDisabled ? 'true' : 'false'"
-          :aria-label="t('generic.colorPicker')"
+          :aria-label="ariaLabel"
+          :aria-describedby="ariaDescribedBy"
           type="color"
           class="color-input"
           :disabled="isDisabled"

package/components/form/FileImageSelector.vue

@@ -132,7 +132,7 @@ $logo: 60px;
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--overlay-bg);
+      background-color: var(--subtle-overlay-bg);
     }
 
   }

package/components/form/Footer.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
 import Banner from '@components/Banner/Banner.vue';
 
 export default defineComponent({
-  emits: ['save', 'done'],
+  emits: ['save', 'done', 'closeError'],
 
   components: { AsyncButton, Banner },
 
@@ -20,8 +20,8 @@ export default defineComponent({
     },
 
     errors: {
-      type:    Array,
-      default: null,
+      type:    Array as PropType<string[]>,
+      default: () => []
     },
 
     disableSave: {
@@ -37,6 +37,10 @@ export default defineComponent({
   },
 
   methods: {
+    closeError(index: number) {
+      this.$emit('closeError', index);
+    },
+
     save(buttonCb: AsyncButtonCallback) {
       this.$emit('save', buttonCb);
     },
@@ -58,6 +62,8 @@ export default defineComponent({
       <Banner
         color="error"
         :label="err"
+        :closable="true"
+        @close="closeError(idx)"
       />
     </div> -->
     <div class="buttons">