update AsyncButton to fix problem with keyboard nav focus (#13954)

* update AsyncButton to fix problem with not being able to have to keyboard nav focus back to the element when performing an action triggered by AsyncButton

* fix e2e test

* fix e2e test

Author: aalves08

cypress/e2e/po/components/async-button.po.ts

@@ -13,6 +13,10 @@ export default class AsyncButtonPo extends ComponentPo {
     return this.self().should('not.have.attr', 'disabled');
   }
 
+  waitForDisabledAppearanceToDisappear(): Cypress.Chainable {
+    return this.self().should('have.class', 'ready-for-action');
+  }
+
   label(name: string): Cypress.Chainable {
     return this.self().contains(name);
   }

cypress/e2e/tests/pages/global-settings/branding.spec.ts

@@ -17,9 +17,14 @@ const settings = {
     new:      'Rancher e2e'
   },
   primaryColor: {
-    original: '#3d98d3', // 3D98D3
-    new:      '#f80dd8',
-    newRGB:   'rgb(248, 13, 216)', // 'rgb(220, 222, 231)'
+    original:     '#3d98d3', // 3D98D3
+    new:          '#f80dd8',
+    newRGB:       'rgb(248, 13, 216)', // 'rgb(220, 222, 231)'
+    // the browser seems to sometimes slightly change the color
+    // don't know if it's related to the actual color input output
+    // OR the application of the color in the css
+    // check PR  https://github.com/rancher/dashboard/pull/13954 description
+    validNewRGBs: ['rgb(248, 13, 216)', 'rgb(249, 63, 224)']
   },
   linkColor: {
     original: '#3d98d3', // #3D98D3
@@ -352,39 +357,39 @@ describe('Branding', { testIsolation: 'off' }, () => {
 
     BrandingPagePo.navTo();
 
-    // Set
     brandingPage.primaryColorCheckbox().set();
     brandingPage.primaryColorPicker().value().should('not.eq', settings.primaryColor.new);
     brandingPage.primaryColorPicker().set(settings.primaryColor.new);
     brandingPage.applyAndWait('**/ui-primary-color', 200);
+    brandingPage.applyButton().waitForDisabledAppearanceToDisappear();
 
     // Check in session
     brandingPage.primaryColorPicker().value().should('eq', settings.primaryColor.new);
     brandingPage.primaryColorPicker().previewColor().should('eq', settings.primaryColor.newRGB);
     brandingPage.applyButton().self().should('have.css', 'background').should((background: string) => {
-      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB));
+      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.validNewRGBs[0]) || b.startsWith(settings.primaryColor.validNewRGBs[1]));
     });
 
     // Check over reload
     cy.reload();
     brandingPage.primaryColorPicker().value().should('eq', settings.primaryColor.new);
     brandingPage.primaryColorPicker().previewColor().should('eq', settings.primaryColor.newRGB);
     brandingPage.applyButton().self().should('have.css', 'background').should((background: string) => {
-      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB));
+      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.validNewRGBs[0]) || b.startsWith(settings.primaryColor.validNewRGBs[1]));
     });
 
     // check that login page has new styles applied
     // https://github.com/rancher/dashboard/issues/10788
     loginPage.goTo();
 
     loginPage.submitButton().self().should('have.css', 'background').should((background: string) => {
-      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB));
+      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.validNewRGBs[0]) || b.startsWith(settings.primaryColor.validNewRGBs[1]));
     });
 
     cy.reload();
 
     loginPage.submitButton().self().should('have.css', 'background').should((background: string) => {
-      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB));
+      expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.validNewRGBs[0]) || b.startsWith(settings.primaryColor.validNewRGBs[1]));
     });
     // EO test https://github.com/rancher/dashboard/issues/10788
 

shell/assets/styles/global/_button.scss

@@ -215,6 +215,7 @@ fieldset[disabled] .btn {
     }
   }
 
+  .btn-disabled,
   .btn[disabled] {
     // Ensure disabled button's border remains as-is, otherwise button appears vertically shorter than others in group
     border: inherit;

shell/components/AsyncButton.vue

@@ -11,6 +11,7 @@ export const ASYNC_BUTTON_STATES = {
 
 const TEXT = 'text';
 const TOOLTIP = 'tooltip';
+const DISABLED_CLASS_STYLE = 'btn-disabled';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
@@ -152,9 +153,29 @@ export default defineComponent({
         out[`btn-${ this.size }`] = true;
       }
 
+      // while we are waiting for the async button to get
+      // it's callback we want to the button to appear as disabled
+      // but not being actually disabled as need it to be
+      // able to return the keyboard navigation focus back to it
+      // which can't be done while actually disabled, as per
+      // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols
+      if (this.phase === ASYNC_BUTTON_STATES.WAITING) {
+        out[DISABLED_CLASS_STYLE] = true;
+      }
+
+      // used to assist e2e testing mostly when waiting for button to return
+      // to it's normal state/phase
+      if (this.phase === ASYNC_BUTTON_STATES.ACTION) {
+        out['ready-for-action'] = true;
+      }
+
       return out;
     },
 
+    appearsDisabled(): boolean {
+      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
+    },
+
     displayIcon(): string {
       const exists = this.$store.getters['i18n/exists'];
       const t = this.$store.getters['i18n/t'];
@@ -204,10 +225,6 @@ export default defineComponent({
       return this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
-    isDisabled(): boolean {
-      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
-    },
-
     isManualRefresh() {
       return this.mode === 'manual-refresh';
     },
@@ -232,7 +249,7 @@ export default defineComponent({
 
   methods: {
     clicked() {
-      if ( this.isDisabled ) {
+      if ( this.appearsDisabled ) {
         return;
       }
 
@@ -283,8 +300,8 @@ export default defineComponent({
     :class="classes"
     :name="name"
     :type="type"
-    :disabled="isDisabled"
-    :aria-disabled="isDisabled"
+    :disabled="disabled"
+    :aria-disabled="appearsDisabled"
     :tab-index="tabIndex"
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"

shell/components/__tests__/AsyncButton.test.ts

@@ -42,7 +42,7 @@ describe('component: AsyncButton', () => {
     expect(span.text()).toBe('some-string');
   });
 
-  it('click on async button should emit click with a proper state of waiting, disabled and spinning ::: CB true', () => {
+  it('click on async button should emit click with a proper state of waiting, appear disabled and spinning ::: CB true', () => {
     jest.useFakeTimers();
 
     const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
@@ -65,7 +65,7 @@ describe('component: AsyncButton', () => {
     expect(wrapper.emitted('click')).toHaveLength(1);
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.WAITING);
     expect(wrapper.vm.isSpinning).toBe(true);
-    expect(wrapper.vm.isDisabled).toBe(true);
+    expect(wrapper.vm.appearsDisabled).toBe(true);
     // testing cb function has been emitted
     expect(typeof wrapper.emitted('click')![0][0]).toBe('function');