@rancher/shell 3.0.5-rc.2 → 3.0.5-rc.3

package/assets/data/aws-regions.json

@@ -11,6 +11,7 @@
   "ap-southeast-3",
   "ap-southeast-4",
   "ap-southeast-5",
+  "ap-southeast-7",
   "ca-central-1",
   "ca-west-1",
   "cn-north-1",
@@ -26,6 +27,7 @@
   "il-central-1",
   "me-central-1",
   "me-south-1",
+  "mx-central-1",
   "sa-east-1",
   "us-east-1",
   "us-east-2",

package/assets/styles/global/_layout.scss

@@ -69,7 +69,6 @@ HEADER {
   display: grid;
   position: relative;
   flex: 1 1 auto;
-  overflow-y: auto;
   min-height: 0px;
 
   &.dashboard-padding-left {

package/assets/translations/en-us.yaml

@@ -7,6 +7,9 @@ generic:
   userMenu: user menu
   actionMenu: action menu
   namespaceFilter: namespace filter menu
+  banners:
+    altCloseBanner: Close banner icon
+    bannerIcon: Banner icon
   filterNamespaces: filter namespaces
   clearSearch: clear search
   clearFilters: clear filters
@@ -129,8 +132,16 @@ generic:
         }
   basic: Basic
   ariaLabel:
-    key: Key {index}
-    value: Value {index}
+    keyValue: Key-Value input
+    key: Key for row {index}
+    value: Value for row {index}
+    remove: remove row {index}
+    addKeyValue: Add a new Key-Value row
+    readKeyValue: read  Key-Values from file
+    genericAddRow: Add a new row
+    arrayList: Array list input
+    genericRow: row {index}
+  
 
 locale:
   menu: Locale selector menu
@@ -181,7 +192,6 @@ nav:
   restoreSnapshot: Restore Snapshot
   rotateCertificates: Rotate Certificates
   rotateEncryptionKeys: Rotate Encryption Keys
-  saveAsRKETemplate: Save as RKE Template
   takeSnapshot: Take Snapshot
   seeAllClusters: See all clusters
   seeAllClustersCollapsed: See all
@@ -717,6 +727,8 @@ assignTo:
   workspace: Workspace
 
 asyncButton:
+  alt:
+    iconAlt: Async button icon
   apply:
     action: Apply
     success: Applied
@@ -1936,9 +1948,8 @@ cluster:
         =1 { {pool_name}: The provided value for {fields} was not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
         other { {pool_name}: The provided values for {fields} were not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
       }
-    rke1DeprecationMessage: 'Rancher Kubernetes Engine (RKE / RKE1) will reach end of life on July 31, 2025. Rancher 2.12.0 and later will no longer support provisioning or managing downstream RKE1 clusters. We recommend replatforming RKE1 clusters to RKE2 to ensure continued support and security updates. Learn more about the transition <a href="https://www.suse.com/support/kb/doc/?id=000021518" target="_blank" rel="noopener noreferrer nofollow">here</a>.'
-    rke1DeprecationShortMessage: Rancher Kubernetes Engine (RKE / RKE1) will reach end of life on July 31, 2025. Rancher 2.12.0 and later will no longer support provisioning or managing downstream RKE1 clusters.
-  rkeTemplateUpgrade: Template revision {name} available for upgrade
+    rke1DeprecationMessage: 'Rancher Kubernetes Engine (RKE / RKE1) has reached end of life and these clusters are no longer supported. We recommend replatforming RKE1 clusters to RKE2 to ensure continued support and security updates. Learn more about the transition <a href="https://www.suse.com/support/kb/doc/?id=000021518" target="_blank" rel="noopener noreferrer nofollow">here</a>.'
+  rke1Unsupported: RKE1 Clusters are no longer supported
   cloudCredentials:
     renew: Renew Cloud Credentials
     expired: Cloud Credential expired, please Renew Cloud Credentials
@@ -3209,8 +3220,6 @@ landing:
     title: Commercial Support
     body: Learn about commercial support
   landingPrefs:
-    title: You can change what you see when you login via preferences
-    userPrefs: Preferences
     body: "You can change where you land when you login"
     ariaLabelTakeMeToCluster: Select which cluster to take me to after login
     options:
@@ -3908,6 +3917,7 @@ nameNsDescription:
     placeholder: Any text you want that better describes this resource
 
 namespace:
+  cancelCreateAriaLabel: Cancel create namespace
   containerResourceLimit: Container Resource Limit
   resourceQuotas: Resource Quotas
   project:
@@ -4981,12 +4991,6 @@ promptRollback:
   multipleWorkloadError: "Only one workload can be rolled back at a time."
   singleRevisionBanner: There are no revisions to roll back to.
 
-promptSaveAsRKETemplate:
-  title: Convert {cluster} to new RKE Template
-  name: Cluster Template Name
-  description: Create a new RKE cluster template and initial revision from the current cluster configuration.
-  warning: This will modify the cluster, setting it up to use the newly created cluster template and revision. This can not be undone.
-
 promptRotateEncryptionKey:
   title: Rotate Encryption Keys
   description: The last backup {name} was performed on {date}
@@ -7826,15 +7830,12 @@ performance:
     authUserTTL: This timeout cannot be higher than the user session timeout auth-user-session-ttl-minutes, which is currently {current} minutes.
   serverPagination:
     label: Server-side Pagination
-    description: By default Lists will fetch all resources and paginate in the browser (create the page given sorting and filtering settings). Change this setting to enable pagination server-side. This should help the responsiveness of the UI in systems with a lot of resources.
-    checkboxLabel: Enable Server-side Pagination
+    description: By default Lists will fetch all resources and paginate (create the page given sort and filter settings) locally in the browser. Server-Side Pagination moves this out from the browser to the server. This improves performance of the UI, especially in systems with lots of resources.
     applicable: "Server-side pagination applies to Resource Types"
-    incompatibleDescription: "Server-side Pagination is incompatible with Manual Refresh and Incremental Loading. Enabling this will disable them."
-    featureFlag: The&nbsp;<a href="{ffUrl}">Feature Flag</a>&nbsp;`ui-sql-cache` must be enabled to use this feature
+    featureFlag: Enabling/Disabling <i class="mr-5">"Server-side Pagination"</i> is now solely done so via the <i class="mr-5">ui-sql-cache</i>&nbsp;<a href="{ffUrl}">Feature Flag</a>
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources
-    experimental: This setting is experimental and may be removed or updated in future versions. We do not recommend enabling this setting in production environments.
 banner:
   label: Fixed Banners
   settingName: Banners
@@ -7867,6 +7868,12 @@ banner:
   consent: Consent Banner
   consentFootnote: "Tip: Use \\n character for line break"
   individualSetting: 'This banner is managed by the setting "{name}" and can not be modified in the UI'
+  type:
+    html: HTML
+    text: Text
+  htmlWarning: 'Not all HTML elements or attriutes are permitted and the HTML entered here will be sanitized before display. For HTML anchor elements, it is recommended to use the target attribute to have links open in a blank tab.'
+  htmlContent: HTML Content
+  toggleTextHtml: Toggle between text and html
 
 branding:
   label: Branding
@@ -8167,3 +8174,38 @@ gitPicker:
 networkAttachmentDefinition:
   tabs:
     config: Config
+
+errors:
+  actionNotAvailable: This action is not currently available
+  missingRequired: is required
+  notUnique: is not unique
+  notNullable: must be set
+  invalidOption: is not a valid option
+  invalidCharacters: contains invalid characters
+  minLengthExceeded: is not long enough
+  maxLengthExceeded: is too long
+  minLimitExceeded: is too small
+  maxLimitExceded: is too big
+  messageAndDetail: '{message} ({detail})'
+  messageOrDetail: '{val}'
+  failedInApi: 
+    withName:
+      withCodeExplanation:
+        withMessageDetail: 'Validation failed in API: {name} {codeExplanation}: {messageDetail}'
+        withoutMessageDetail: 'Validation failed in API: {name} {codeExplanation}'
+      withMessageDetail: 'Validation failed in API: {name} {messageDetail}'
+      withoutAnythingElse: 'Validation failed in API: {name} '
+    withoutName:
+      withMessageDetail: 
+        withCodeExplanation: 'Validation failed in API: {codeExplanation}: {messageDetail}'
+        withoutCodeExplanation: 'Validation failed in API: {messageDetail}'
+      withCode:
+        withCodeExplanation: 'Validation failed in API: {code} {codeExplanation}'
+        withoutCodeExplanation: 'Validation failed in API: {code}'
+    withoutAnything: Validation failed in API.
+  notFound:
+    withUrl: '{msg}: {url}'
+    withoutUrl: '{msg}'
+
+
+

package/assets/translations/zh-hans.yaml

@@ -137,7 +137,6 @@ nav:
   restoreSnapshot: 还原快照
   rotateCertificates: 轮换证书
   rotateEncryptionKeys: 轮换加密密钥
-  saveAsRKETemplate: 保存为 RKE 模板
   takeSnapshot: 拍摄快照
   group:
     cluster: 集群
@@ -1669,7 +1668,6 @@ cluster:
     rke2-k3-reprovisioning: '更改集群配置可能导致节点重新配置。详情请参见 <a target="blank" href="{docsBase}/how-to-guides/new-user-guides/launch-kubernetes-with-rancher/rke1-vs-rke2-differences#cluster-api" target="_blank" rel="noopener nofollow">文档</a>。'
     desiredNodeGroupWarning: 没有可用于运行 Cluster Agent 的节点。要让集群变为 Active 状态，至少需要有 1 个可用的节点。
     haveArgInfo: 所选 Kubernetes 版本的配置信息不可用。此屏幕中可用的选项将受到限制，你可能需要使用 YAML 编辑器。
-  rkeTemplateUpgrade: 模板修订版 {name} 可用于升级
 
   availabilityWarnings:
     node: 节点 {name} 处于非活动状态
@@ -2731,8 +2729,6 @@ landing:
     title: 商业支持
     body: 了解商业支持
   landingPrefs:
-    title: 更改登录后显示的页面：
-    userPrefs: 偏好设置
     body: "登录后显示："
     options:
       homePage: 主页
@@ -4447,12 +4443,6 @@ promptRollback:
   multipleWorkloadError: "一次只能回滚一个工作负载。"
   singleRevisionBanner: 没有可用于回滚的修订版本。
 
-promptSaveAsRKETemplate:
-  title: 将 {cluster} 转换为新的 RKE 模板
-  name: 集群模板名称
-  description: 创建新的集群模板，并使用当前集群配置发起修改。
-  warning: 此操作将对集群进行修改，即把新创建的集群模板和修改应用到集群中。此操作不能撤销。
-
 promptRotateEncryptionKey:
   title: 轮换加密密钥
   description: 上次备份 {name} 的备份时间为 {date}

package/chart/monitoring/index.vue

@@ -55,7 +55,7 @@ export default {
   async fetch() {
     const { $store } = this;
 
-    // Fetch all the resources required for all the tabs asyncronously up front
+    // Fetch all the resources required for all the tabs asynchronously up front
     const hashPromises = {
       namespaces:        $store.getters['namespaces'](),
       pvcs:              $store.dispatch('cluster/findAll', { type: PVC }),

package/components/AsyncButton.vue

@@ -314,11 +314,13 @@ export default defineComponent({
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
       :class="{icon: true, 'icon-lg': true, [displayIcon]: true, 'mr-0': isManualRefresh}"
+      :alt="t('asyncButton.alt.iconAlt')"
     />
     <span
       v-if="labelAs === 'text' && displayLabel"
       v-clean-tooltip="tooltip"
       v-clean-html="displayLabel"
+      data-testid="async-btn-display-label"
     />
   </button>
 </template>

package/components/CodeMirror.vue

@@ -88,7 +88,7 @@ export default {
 
       // fixes https://github.com/rancher/dashboard/issues/13653
       // we can't use the inert HTML prop on the parent because it disables all interaction
-      out.readOnly = this.isDisabled ? 'nocursor' : false;
+      out.readOnly = !!this.isDisabled;
 
       return out;
     },
@@ -227,8 +227,8 @@ export default {
     },
 
     onFocus() {
-      this.isCodeMirrorFocused = true;
-      this.$emit('onFocus', true);
+      this.isCodeMirrorFocused = !this.isDisabled;
+      this.$emit('onFocus', this.isCodeMirrorFocused);
     },
 
     onBlur() {

package/components/CruResource.vue

@@ -265,7 +265,7 @@ export default {
       return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
         ...acc,
         [error]: {
-          message: error,
+          message: this.formatError(error),
           icon:    null
         }
       }), {});
@@ -371,19 +371,23 @@ export default {
     },
 
     async clickSave(buttonDone) {
-      try {
-        await this.createNamespaceIfNeeded();
-
-        // If the attempt to create the new namespace
-        // is successful, save the resource.
-        this.$emit('finish', buttonDone);
-      } catch (err) {
+      if (this.createNamespace) {
+        try {
+          await this.createNamespaceIfNeeded();
+        } catch (err) {
         // After the attempt to create the namespace,
         // show any applicable errors if the namespace is
         // invalid.
-        this.$emit('error', exceptionToErrorsArray(err.message));
-        buttonDone(false);
+          this.$emit('error', exceptionToErrorsArray(err.message));
+          buttonDone(false);
+
+          return;
+        }
       }
+
+      // If the attempt to create the new namespace
+      // was successful or no ns needs to be created, save the resource.
+      this.$emit('finish', buttonDone);
     },
 
     save() {
@@ -395,17 +399,13 @@ export default {
       const newNamespaceName = get(this.resource, this.namespaceKey);
       let namespaceAlreadyExists = false;
 
-      if (!this.createNamespace) {
-        return;
-      }
-
       try {
         // This is in a try-catch block because the call to fetch
         // a namespace throws an error if the namespace is not found.
         namespaceAlreadyExists = !!(await this.$store.dispatch(`${ inStore }/find`, { type: NAMESPACE, id: newNamespaceName }));
       } catch {}
 
-      if (this.createNamespace && !namespaceAlreadyExists) {
+      if (!namespaceAlreadyExists) {
         try {
           const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: newNamespaceName }, { root: true });
 
@@ -427,6 +427,94 @@ export default {
 
     shouldProvideSlot(slot) {
       return slot !== 'default' && typeof this.$slots[slot] === 'function';
+    },
+
+    formatError(err) {
+      if ( typeof err === 'string') {
+        return err;
+      }
+
+      if ( err?.code === 'ActionNotAvailable' ) {
+        return this.t('errors.actionNotAvailable');
+      }
+      const msg = !!err?.message ? err.message : '';
+      let messageDetail = '';
+
+      if (!!err?.message && !!err.detail) {
+        messageDetail = this.t('errors.messageAndDetail', { message: err.message, detail: err.detail });
+      } else if (!!err?.message || !!err.detail) {
+        const val = err.message ? err.message : err.detail;
+
+        messageDetail = this.t('errors.messageOrDetail', { val });
+      }
+
+      if ( err?.status === 422 ) {
+        const name = err?.fieldName;
+        const code = err?.code;
+        let codeExplanation = '';
+
+        switch ( err?.code ) {
+        case 'MissingRequired':
+          codeExplanation = this.t('errors.missingRequired'); break;
+        case 'NotUnique':
+          codeExplanation = this.t('errors.notUnique'); break;
+        case 'NotNullable':
+          codeExplanation = this.t('errors.notNullable'); break;
+        case 'InvalidOption':
+          codeExplanation = this.t('errors.invalidOption'); break;
+        case 'InvalidCharacters':
+          codeExplanation = this.t('errors.invalidCharacters'); break;
+        case 'MinLengthExceeded':
+          codeExplanation = this.t('errors.minLengthExceeded'); break;
+        case 'MaxLengthExceeded':
+          codeExplanation = this.t('errors.maxLengthExceeded'); break;
+        case 'MinLimitExceeded':
+          codeExplanation = this.t('errors.minLimitExceeded'); break;
+        case 'MaxLimitExceded':
+          codeExplanation = this.t('errors.maxLimitExceded'); break;
+        }
+
+        if (!!name) {
+          if (!!codeExplanation) {
+            if (!!messageDetail) {
+              return this.t('errors.failedInApi.withName.withCodeExplanation.withMessageDetail', {
+                name, codeExplanation, messageDetail
+              });
+            }
+
+            return this.t('errors.failedInApi.withName.withCodeExplanation.withoutMessageDetail', { name, codeExplanation });
+          }
+          if (!!messageDetail) {
+            return this.t('errors.failedInApi.withName.withMessageDetail', { name, messageDetail });
+          }
+
+          return this.t('errors.failedInApi.withName.withoutAnythingElse', { name });
+        } else {
+          if (!!messageDetail) {
+            if (!!codeExplanation) {
+              return this.t('errors.failedInApi.withoutName.withMessageDetail.withCodeExplanation', { codeExplanation, messageDetail });
+            }
+
+            return this.t('errors.failedInApi.withoutName.withMessageDetail.withoutCodeExplanation', { messageDetail });
+          } else if (!!code) {
+            if (!!codeExplanation) {
+              return this.t('errors.failedInApi.withoutName.withCode.withCodeExplanation', { code, codeExplanation });
+            }
+
+            return this.t('errors.failedInApi.withoutName.withCode.withoutCodeExplanation', { code });
+          }
+
+          return this.t('errors.failedInApi.withoutAnything');
+        }
+      } else if ( err?.status === 404 ) {
+        if (!!err?.opt?.url) {
+          return this.t('errors.notFound.withUrl', { msg, url: err.opt.url });
+        }
+
+        return this.t('errors.notFound.withoutUrl', { msg });
+      }
+
+      return messageDetail.length > 0 ? messageDetail : err;
     }
   },
 

package/components/ExplorerProjectsNamespaces.vue

@@ -1,7 +1,9 @@
 <script>
 import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
-import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
+import {
+  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION
+} from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
 import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
@@ -15,6 +17,7 @@ import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import DOMPurify from 'dompurify';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
@@ -110,7 +113,7 @@ export default {
       return !this.currentCluster || this.namespaces.length ? false : this.$fetchState.pending;
     },
     showIncrementalLoadingIndicator() {
-      return this.perfConfig?.incrementalLoading?.enabled;
+      return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
@@ -122,6 +125,7 @@ export default {
       const headers = [
         STATE,
         NAME,
+        DESCRIPTION
       ];
 
       if (this.groupPreference === 'none') {
@@ -502,6 +506,7 @@ export default {
               <ActionMenu
                 v-if="showProjectActionButton(group.group)"
                 :resource="getProjectActions(group.group)"
+                data-testid="action-button"
                 :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
               />
               <div

package/components/FixedBanner.vue

@@ -164,7 +164,7 @@ export default {
       class="banner"
       data-testid="fixed__banner"
       :style="bannerStyle"
-      :class="{'banner-consent': consent}"
+      :class="{'banner-consent': consent, 'banner-text': !!banner.text}"
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
@@ -177,11 +177,16 @@ export default {
         </div>
       </div>
       <div
-        v-else
+        v-else-if="banner.text"
         class="single-row"
       >
         {{ banner.text }}
       </div>
+      <div
+        v-else-if="banner.html"
+        v-clean-html="banner.html"
+        class="single-row"
+      />
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -205,13 +210,19 @@ export default {
               </div>
             </div>
             <div
-              v-else
+              v-else-if="banner.text"
               class="single-row"
             >
               {{ banner.text }}
             </div>
+            <div
+              v-else-if="banner.html"
+              v-clean-html="banner.html"
+              class="single-row"
+            />
           </div>
           <button
+            data-testid="login-confirmation-accept-button"
             class="btn role-primary"
             @click="hideDialog()"
           >
@@ -225,10 +236,13 @@ export default {
 
 <style lang="scss" scoped>
   .banner {
-    text-align: center;
     line-height: 2em;
     width: 100%;
-    padding: 0 20px;
+
+    &.banner-text {
+      padding: 0 20px;
+      text-align: center;
+    }
 
     &.banner-consent {
       height: unset;

package/components/PaginatedResourceTable.vue

@@ -95,6 +95,12 @@ export default defineComponent({
 
       return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
+  },
+
+  methods: {
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
   }
 });
 
@@ -103,6 +109,7 @@ export default defineComponent({
 <template>
   <div>
     <ResourceTable
+      ref="table"
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"

package/components/ResourceDetail/Masthead.vue

@@ -545,7 +545,6 @@ export default {
               {{ value.createdBy.displayName }}
             </span>
           </span>
-          <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
         </div>
       </div>
       <slot name="right">

package/components/ResourceList/index.vue

@@ -9,6 +9,7 @@ import { ResourceListComponentName } from './resource-list.config';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { sameContents } from '@shell/utils/array';
+import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 
 export default {
   name: ResourceListComponentName,
@@ -138,7 +139,7 @@ export default {
     },
 
     showIncrementalLoadingIndicator() {
-      return this.perfConfig?.incrementalLoading?.enabled;
+      return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
 
   },

package/components/SlideInPanelManager.vue

@@ -53,8 +53,7 @@ function closePanel() {
           <i
             class="icon icon-close"
             data-testid="slide-in-close"
-            :trigger-focus-trap="true"
-            tabindex="0"
+            :tabindex="isOpen ? 0 : -1"
             @click="closePanel"
           />
         </div>

package/components/SortableTable/selection.js

@@ -531,7 +531,7 @@ export default {
     },
 
     clearSelection() {
-      this.update([], this.selectedRows);
+      this.update([], [...this.selectedRows]);
     },
 
   }

package/components/Tabbed/index.vue

@@ -61,6 +61,11 @@ export default {
     tabsOnly: {
       type:    Boolean,
       default: false,
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {}
     }
   },
 
@@ -355,6 +360,7 @@ export default {
       >
         <component
           :is="tab.component"
+          :resource="resource"
         />
       </Tab>
     </div>

package/components/__tests__/AsyncButton.test.ts

@@ -145,4 +145,43 @@ describe('component: AsyncButton', () => {
     expect(spyDone).toHaveBeenCalledWith('cancelled');
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ACTION);
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const mockExists = jest.fn().mockReturnValue(true);
+    const mockT = jest.fn().mockReturnValue('some-string');
+    const ariaLabel = 'some-aria-label';
+    const ariaLabelledBy = 'some-aria-labelledby';
+
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      props:  { icon: 'some-icon', disabled: true },
+      attrs:  { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': mockExists,
+              'i18n/t':      mockT
+            }
+          },
+        }
+      },
+    });
+
+    const item = wrapper.find('button');
+
+    const itemRole = item.attributes('role');
+    const itemAriaLabel = item.attributes('aria-label');
+    const itemAriaLabelledBy = item.attributes('aria-labelledby');
+    const itemAriaDisabled = item.attributes('aria-disabled');
+
+    // let's check some attributes passing...
+    expect(itemAriaLabel).toBe(ariaLabel);
+    expect(itemAriaLabelledBy).toBe(ariaLabelledBy);
+
+    // rest of the checks
+    expect(itemRole).toBe('button');
+    expect(itemAriaDisabled).toBe('true');
+    expect(item.find('span[data-testid="async-btn-display-label"]').attributes('id')).toBe(wrapper.vm.describedbyId);
+    expect(item.find('i').attributes('alt')).toBeDefined();
+  });
 });