fix(billing): add aria-expanded + touch support to BillingComputeGauge components

Closes #4130. Tooltip-only disclosure was inaccessible to keyboard /
screen reader users and unusable on touch devices. Adds:
- aria-expanded bound to tooltip-active state (announces disclosure)
- aria-haspopup='true' on activator
- @touchstart.passive handler to toggle the tooltip on tap
- v-tooltip :open-on-hover gated on (hover: none) media query

Applies to billing.computeGauge.component.vue and
billing.navComputeGauge.component.vue. 6 new unit tests.

Author: PierreBrisorgueil

src/modules/billing/components/billing.computeGauge.component.vue

@@ -1,15 +1,18 @@
 <template>
   <div
     v-if="show"
-    class="compute-gauge px-4 py-2"
+    class="compute-gauge compute-gauge-activator px-4 py-2"
     :class="{ expanded: isExpanded }"
     tabindex="0"
     role="region"
     aria-label="Compute usage"
-    @mouseenter="isExpanded = true"
-    @mouseleave="isExpanded = false"
+    aria-haspopup="true"
+    :aria-expanded="isExpanded ? 'true' : 'false'"
+    @mouseenter="!isTouchDevice && (isExpanded = true)"
+    @mouseleave="!isTouchDevice && (isExpanded = false)"
     @focus="isExpanded = true"
     @blur="isExpanded = false"
+    @touchstart.passive="onTouchActivate"
   >
     <div class="d-flex align-center justify-space-between mb-1">
       <span id="compute-gauge-label" class="text-label-small text-medium-emphasis">Compute</span>
@@ -45,8 +48,22 @@ import { ref, computed } from 'vue';
 import { useBillingStore } from '../stores/billing.store.js';
 import { useAuthStore } from '../../auth/stores/auth.store.js';
 
-/** @desc Expands the detail line — triggered by hover OR keyboard focus. */
+/** @desc Expands the detail line — triggered by hover, keyboard focus, OR touch tap. */
 const isExpanded = ref(false);
+
+/**
+ * @desc True when the primary input is touch (hover: none media query).
+ * Used to disable hover-expand on touch devices in favour of tap-toggle.
+ * @returns {boolean}
+ */
+const isTouchDevice = computed(() => {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia?.('(hover: none)').matches === true;
+});
+
+/** @desc Toggles expansion on tap for touch-only users. */
+const onTouchActivate = () => { isExpanded.value = !isExpanded.value; };
+
 const billingStore = useBillingStore();
 const authStore = useAuthStore();
 

src/modules/billing/components/billing.navComputeGauge.component.vue

@@ -13,12 +13,15 @@
   Gate: hidden when not logged in or meterMode false.
 -->
 <template>
-  <v-tooltip v-if="show" location="end" :open-delay="200">
+  <v-tooltip v-if="show" v-model="tooltipOpen" location="end" :open-delay="200" :open-on-hover="!isTouchDevice" :open-on-click="false">
     <template #activator="{ props: tooltipProps }">
       <v-list-item
         v-bind="tooltipProps"
         :to="'/users/billing'"
         :aria-label="`Compute usage: ${usageMeter ? pctUsed + '% used' : '—'}`"
+        aria-haspopup="true"
+        :aria-expanded="tooltipOpen ? 'true' : 'false'"
+        @touchstart.passive="onTouchActivate"
       >
         <template #prepend>
           <v-progress-circular
@@ -50,7 +53,24 @@ export default {
     return { billingStore, authStore };
   },
 
+  data() {
+    return {
+      /** @desc Controls tooltip visibility — bound via v-model to v-tooltip. */
+      tooltipOpen: false,
+    };
+  },
+
   computed: {
+    /**
+     * @desc True when the primary input is touch (hover: none media query).
+     * Used to gate open-on-hover on the tooltip.
+     * @returns {boolean}
+     */
+    isTouchDevice() {
+      if (typeof window === 'undefined') return false;
+      return window.matchMedia?.('(hover: none)').matches === true;
+    },
+
     show() {
       if (!this.authStore.isLoggedIn) return false;
       return this.authStore.serverConfig?.billing?.meterMode === true;
@@ -126,6 +146,9 @@ export default {
   },
 
   methods: {
+    /** @desc Toggles tooltip open/closed on tap for touch-only users. */
+    onTouchActivate() { this.tooltipOpen = !this.tooltipOpen; },
+
     /**
      * @desc Returns the ISO 8601 string for the next Monday at 00:00 UTC.
      * Used as a fallback reset date when `weekResetAt` is not set on the meter doc.

src/modules/billing/tests/billing.computeGauge.component.unit.tests.js

@@ -158,4 +158,40 @@ describe('BillingComputeGaugeComponent', () => {
     expect(wrapper.vm.progressPercent).toBe(100);
     expect(wrapper.vm.barColor).toBe('error');
   });
+
+  // ── a11y + touch ─────────────────────────────────────────────────────────
+
+  describe('a11y + touch', () => {
+    const setupVisible = () => {
+      const authStore = useAuthStore();
+      const billingStore = useBillingStore();
+      authStore.cookieExpire = Date.now() + 86400000;
+      authStore.serverConfig = { billing: { meterMode: true } };
+      billingStore.usageMeter = { meterUsed: 50, meterQuota: 100, weekResetAt: null };
+    };
+
+    it('aria-expanded defaults to "false" on the activator element', () => {
+      setupVisible();
+      const wrapper = mountComponent();
+      const activator = wrapper.find('.compute-gauge-activator');
+      expect(activator.attributes('aria-expanded')).toBe('false');
+    });
+
+    it('touchstart event sets tooltip-active state → aria-expanded becomes "true"', async () => {
+      setupVisible();
+      const wrapper = mountComponent();
+      const activator = wrapper.find('.compute-gauge-activator');
+      await activator.trigger('touchstart');
+      expect(activator.attributes('aria-expanded')).toBe('true');
+    });
+
+    it('second touchstart toggles aria-expanded back to "false"', async () => {
+      setupVisible();
+      const wrapper = mountComponent();
+      const activator = wrapper.find('.compute-gauge-activator');
+      await activator.trigger('touchstart');
+      await activator.trigger('touchstart');
+      expect(activator.attributes('aria-expanded')).toBe('false');
+    });
+  });
 });

src/modules/billing/tests/billing.navComputeGauge.component.unit.tests.js

@@ -348,4 +348,57 @@ describe('BillingNavComputeGaugeComponent', () => {
     const listItem = wrapper.findComponent({ name: 'VListItem' });
     expect(listItem.props('to')).toBe('/users/billing');
   });
+
+  // ── a11y + touch ─────────────────────────────────────────────────────────
+
+  describe('a11y + touch', () => {
+    // jsdom does not implement window.visualViewport; Vuetify's VOverlay uses it
+    // when the tooltip opens. Stub it so tests that toggle tooltipOpen don't crash.
+    beforeEach(() => {
+      if (!window.visualViewport) {
+        Object.defineProperty(window, 'visualViewport', {
+          configurable: true,
+          value: { width: 1024, height: 768, offsetTop: 0, offsetLeft: 0, addEventListener: () => {}, removeEventListener: () => {} },
+        });
+      }
+    });
+
+    afterEach(() => {
+      // Clean up stub between tests to keep other suites unaffected
+      if (window.visualViewport) {
+        Object.defineProperty(window, 'visualViewport', { configurable: true, value: undefined });
+      }
+    });
+
+    const setupVisible = () => {
+      const authStore = useAuthStore();
+      const billingStore = useBillingStore();
+      authStore.cookieExpire = Date.now() + 86400000;
+      authStore.serverConfig = { billing: { meterMode: true } };
+      billingStore.usageMeter = { meterUsed: 50, meterQuota: 100, extrasRemaining: 0, weekResetAt: null };
+    };
+
+    it('aria-expanded defaults to "false" on the activator (v-list-item)', () => {
+      setupVisible();
+      wrapper = mountComponent();
+      const listItem = wrapper.findComponent({ name: 'VListItem' });
+      expect(listItem.attributes('aria-expanded')).toBe('false');
+    });
+
+    it('onTouchActivate toggles tooltipOpen from false to true', () => {
+      setupVisible();
+      wrapper = mountComponent();
+      expect(wrapper.vm.tooltipOpen).toBe(false);
+      wrapper.vm.onTouchActivate();
+      expect(wrapper.vm.tooltipOpen).toBe(true);
+    });
+
+    it('second onTouchActivate call toggles tooltipOpen back to false', () => {
+      setupVisible();
+      wrapper = mountComponent();
+      wrapper.vm.onTouchActivate();
+      wrapper.vm.onTouchActivate();
+      expect(wrapper.vm.tooltipOpen).toBe(false);
+    });
+  });
 });