RefreshPicker: Update aria labels to match visible labels (#118269)

* update aria labels to match visible labels

* fix tests

* remove unnecessary aria-labels

e2e-playwright/dashboard-cujs/dashboard-view.spec.ts

@@ -189,7 +189,7 @@ test.describe(
         const refreshedPanelContents = await panelContent.textContent();
 
         await intervalRefreshBtn.click();
-        const offBtn = page.locator('button[aria-label="Turn off auto refresh"]');
+        const offBtn = page.locator('button[aria-label="Off"]');
         await offBtn.click();
 
         await expect(panelContent).toHaveText(refreshedPanelContents!, {

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.test.tsx

@@ -11,7 +11,7 @@ describe('RefreshPicker', () => {
         const result = intervalsToOptions();
 
         expect(result).toEqual([
-          { value: '', label: 'Off', ariaLabel: 'Turn off auto refresh' },
+          { value: '', label: 'Off' },
           { value: '5s', label: '5s', ariaLabel: '5 seconds' },
           { value: '10s', label: '10s', ariaLabel: '10 seconds' },
           { value: '30s', label: '30s', ariaLabel: '30 seconds' },
@@ -33,7 +33,7 @@ describe('RefreshPicker', () => {
         const result = intervalsToOptions({ intervals });
 
         expect(result).toEqual([
-          { value: '', label: 'Off', ariaLabel: 'Turn off auto refresh' },
+          { value: '', label: 'Off' },
           { value: '5s', label: '5s', ariaLabel: '5 seconds' },
           { value: '10s', label: '10s', ariaLabel: '10 seconds' },
         ]);
@@ -45,7 +45,7 @@ describe('RefreshPicker', () => {
 
       const result = intervalsToOptions({ intervals });
       expect(result).toEqual([
-        { value: '', label: 'Off', ariaLabel: 'Turn off auto refresh' },
+        { value: '', label: 'Off' },
         { value: '10s', label: '10s', ariaLabel: '10 seconds' },
         { value: '1m 30s', label: '1m 30s', ariaLabel: '1 minute 30 seconds' },
       ]);
@@ -54,13 +54,13 @@ describe('RefreshPicker', () => {
   describe('translateOption', () => {
     it('returns LIVE, Off, auto, and custom options correctly', () => {
       const live = translateOption(RefreshPicker.liveOption.value);
-      expect(live).toMatchObject({ value: 'LIVE', label: expect.any(String), ariaLabel: expect.any(String) });
+      expect(live).toMatchObject({ value: 'LIVE', label: expect.any(String) });
 
       const off = translateOption(RefreshPicker.offOption.value);
-      expect(off).toMatchObject({ value: '', label: expect.any(String), ariaLabel: expect.any(String) });
+      expect(off).toMatchObject({ value: '', label: expect.any(String) });
 
       const auto = translateOption(RefreshPicker.autoOption.value);
-      expect(auto).toMatchObject({ value: 'auto', label: expect.any(String), ariaLabel: expect.any(String) });
+      expect(auto).toMatchObject({ value: 'auto', label: expect.any(String) });
 
       const custom = translateOption('7s');
       expect(custom).toMatchObject({ value: '7s', label: '7s' });
@@ -74,12 +74,12 @@ describe('RefreshPicker', () => {
       expect(RefreshPicker.isLive(undefined)).toBe(false);
     });
     it('offOption, liveOption and autoOption', () => {
-      expect(RefreshPicker.offOption).toEqual({ value: '', label: 'Off', ariaLabel: 'Turn off auto refresh' });
-      expect(RefreshPicker.liveOption).toEqual({ value: 'LIVE', label: 'Live', ariaLabel: 'Turn on live streaming' });
+      expect(RefreshPicker.offOption).toEqual({ value: '', label: 'Off', ariaLabel: 'Off' });
+      expect(RefreshPicker.liveOption).toEqual({ value: 'LIVE', label: 'Live', ariaLabel: 'Live' });
       expect(RefreshPicker.autoOption).toEqual({
         value: 'auto',
         label: 'Auto',
-        ariaLabel: 'Select refresh from the query range',
+        ariaLabel: 'Auto',
       });
     });
   });

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -32,17 +32,17 @@ export interface Props {
 const offOption = {
   label: 'Off',
   value: '',
-  ariaLabel: 'Turn off auto refresh',
+  ariaLabel: 'Off',
 };
 const liveOption = {
   label: 'Live',
   value: 'LIVE',
-  ariaLabel: 'Turn on live streaming',
+  ariaLabel: 'Live',
 };
 const autoOption = {
   label: 'Auto',
   value: 'auto',
-  ariaLabel: 'Select refresh from the query range',
+  ariaLabel: 'Auto',
 };
 
 /**
@@ -94,7 +94,7 @@ const RefreshPickerComponent = memo((props: Props) => {
     selectedValue = { value: '' };
   }
 
-  const durationAriaLabel = selectedValue.ariaLabel;
+  const durationAriaLabel = selectedValue.ariaLabel ?? selectedValue.label;
   const ariaLabelDurationSelectedMessage = t(
     'refresh-picker.aria-label.duration-selected',
     'Choose refresh time interval with current interval {{durationAriaLabel}} selected',
@@ -151,25 +151,22 @@ export const RefreshPicker = Object.assign(RefreshPickerComponent, {
   autoOption,
 });
 
-export const translateOption = (option: string) => {
+export const translateOption = (option: string): SelectableValue<string> => {
   switch (option) {
     case liveOption.value:
       return {
         label: t('refresh-picker.live-option.label', 'Live'),
         value: option,
-        ariaLabel: t('refresh-picker.live-option.aria-label', 'Turn on live streaming'),
       };
     case offOption.value:
       return {
         label: t('refresh-picker.off-option.label', 'Off'),
         value: option,
-        ariaLabel: t('refresh-picker.off-option.aria-label', 'Turn off auto refresh'),
       };
     case autoOption.value:
       return {
-        label: t('refresh-picker.auto-option.label', autoOption.label),
+        label: t('refresh-picker.auto-option.label', 'Auto'),
         value: option,
-        ariaLabel: t('refresh-picker.auto-option.aria-label', autoOption.ariaLabel),
       };
   }
   return {

public/locales/en-US/grafana.json

@@ -13390,15 +13390,12 @@
       "duration-selected": "Choose refresh time interval with current interval {{durationAriaLabel}} selected"
     },
     "auto-option": {
-      "aria-label": "",
-      "label": ""
+      "label": "Auto"
     },
     "live-option": {
-      "aria-label": "Turn on live streaming",
       "label": "Live"
     },
     "off-option": {
-      "aria-label": "Turn off auto refresh",
       "label": "Off"
     },
     "tooltip": {