feat(lightspeed): internationalize FAB tooltip and aria-label (#3053)

lokanandaprabhu · cursoragent · web-flow · commit cab499247403 · 2026-05-06T18:09:41.000+05:30
Add tooltip.fab.open and tooltip.fab.close with locale strings. Update Playwright openChatbot to use translated accessible names, unit tests, and alpha API report. Include changeset for plugin patch.

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/workspaces/lightspeed/.changeset/lightspeed-fab-i18n.md b/workspaces/lightspeed/.changeset/lightspeed-fab-i18n.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Internationalize the Lightspeed floating action button: tooltip and `aria-label` use `tooltip.fab.open` / `tooltip.fab.close`, with German, Spanish, French, Italian, and Japanese translations.
diff --git a/workspaces/lightspeed/e2e-tests/lightspeed.mcp.test.ts b/workspaces/lightspeed/e2e-tests/lightspeed.mcp.test.ts
@@ -69,7 +69,7 @@ test.describe('Lightspeed MCP', () => {
   test.describe('Chatbot MCP settings', () => {
     async function runMcpPanelScenario(mcpList: McpServersListMock) {
       await mockMcpServers(sharedPage, mcpList);
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await verifyMcpSettingsPanel(sharedPage, translations, mcpList);
     }
 
@@ -83,18 +83,18 @@ test.describe('Lightspeed MCP', () => {
 
     test('Overlay', async () => {
       await expectBackstagePageVisible(sharedPage);
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await verifyMcpSettingsPanel(sharedPage, translations);
     });
 
     test('Dock to Window', async () => {
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await selectDisplayMode(sharedPage, translations, 'Dock to window');
       await verifyMcpSettingsPanel(sharedPage, translations);
     });
 
     test('Fullscreen', async () => {
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await selectDisplayMode(sharedPage, translations, 'Fullscreen');
       await verifyMcpSettingsPanel(sharedPage, translations);
     });
@@ -123,7 +123,7 @@ test.describe('Lightspeed MCP', () => {
 
     test('Sort works as expected', async () => {
       await mockMcpServers(sharedPage, mcpServerScenarios.allHealthy);
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await openMcpSettingsPanel(sharedPage, translations);
 
       const rows = mcpServersTableBodyRows(sharedPage, translations);
@@ -139,7 +139,7 @@ test.describe('Lightspeed MCP', () => {
 
     test('Toggle works as expected', async () => {
       const serverName = 'mcp-integration-tools';
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await openMcpSettingsPanel(sharedPage, translations);
 
       const row = mcpServerRow(sharedPage, serverName, translations);
diff --git a/workspaces/lightspeed/e2e-tests/lightspeed.ui.test.ts b/workspaces/lightspeed/e2e-tests/lightspeed.ui.test.ts
@@ -66,7 +66,7 @@ test.describe('Lightspeed UI', () => {
 
     test('should display chatbot in overlay mode with backstage page visible', async () => {
       await expectBackstagePageVisible(sharedPage);
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
 
       await expectConversationArea(sharedPage, translations, 'Overlay');
       await expectChatInputAreaVisible(sharedPage, translations);
@@ -81,7 +81,7 @@ test.describe('Lightspeed UI', () => {
     });
 
     test('should display chatbot in dock to window mode with backstage page visible', async () => {
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await selectDisplayMode(sharedPage, translations, 'Dock to window');
 
       await expectConversationArea(sharedPage, translations, 'Dock to window');
@@ -95,7 +95,7 @@ test.describe('Lightspeed UI', () => {
     });
 
     test('should display chatbot in fullscreen mode with backstage page hidden', async () => {
-      await openChatbot(sharedPage);
+      await openChatbot(sharedPage, translations);
       await selectDisplayMode(sharedPage, translations, 'Fullscreen');
 
       await expectConversationArea(sharedPage, translations, 'Fullscreen');
diff --git a/workspaces/lightspeed/e2e-tests/pages/LightspeedPage.ts b/workspaces/lightspeed/e2e-tests/pages/LightspeedPage.ts
@@ -30,8 +30,8 @@ import {
 export type DisplayMode = 'Overlay' | 'Dock to window' | 'Fullscreen';
 
 // Actions
-export async function openChatbot(page: Page) {
-  await page.getByRole('button', { name: 'lightspeed-open' }).click();
+export async function openChatbot(page: Page, t: LightspeedMessages) {
+  await page.getByRole('button', { name: t['tooltip.fab.open'] }).click();
 }
 
 export async function selectDisplayMode(
diff --git a/workspaces/lightspeed/e2e-tests/pages/McpConfigureTokenPage.ts b/workspaces/lightspeed/e2e-tests/pages/McpConfigureTokenPage.ts
@@ -48,7 +48,7 @@ export class McpConfigureTokenPage {
     mockOptions?: MockMcpServersOptions,
   ): Promise<void> {
     await mockMcpServers(this.page, mcpList, mockOptions ?? {});
-    await openChatbot(this.page);
+    await openChatbot(this.page, this.t);
     await selectDisplayMode(this.page, this.t, mode);
     await openMcpSettingsPanel(this.page, this.t);
   }
diff --git a/workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md b/workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md
@@ -325,6 +325,8 @@ export const lightspeedTranslationRef: TranslationRef<
     readonly 'tooltip.backToBottom': string;
     readonly 'tooltip.settings': string;
     readonly 'tooltip.close': string;
+    readonly 'tooltip.fab.open': string;
+    readonly 'tooltip.fab.close': string;
     readonly 'modal.title.preview': string;
     readonly 'modal.title.edit': string;
     readonly 'icon.lightspeed.alt': string;
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/alpha/LightspeedFAB.tsx b/workspaces/lightspeed/plugins/lightspeed/src/alpha/LightspeedFAB.tsx
@@ -23,6 +23,7 @@ import { ChatbotDisplayMode } from '@patternfly/chatbot';
 import { LightspeedFABIcon } from '../components/LightspeedIcon';
 import { DOCKED_CONTENT_OFFSET } from '../const';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext';
+import { useTranslation } from '../hooks/useTranslation';
 
 const useStyles = makeStyles(theme => ({
   fab: {
@@ -56,6 +57,7 @@ const useStyles = makeStyles(theme => ({
  */
 
 export const LightspeedFAB = () => {
+  const { t } = useTranslation();
   const { isChatbotActive, toggleChatbot, displayMode } =
     useLightspeedDrawerContext();
   const fabButton = useStyles();
@@ -71,15 +73,17 @@ export const LightspeedFAB = () => {
       data-testid="lightspeed-fab"
     >
       <Tooltip
-        title={isChatbotActive ? 'Close Lightspeed' : 'Open Lightspeed'}
+        title={isChatbotActive ? t('tooltip.fab.close') : t('tooltip.fab.open')}
         placement="left"
       >
         <Fab
           color="primary"
           variant="circular"
           size="small"
           onClick={toggleChatbot}
-          aria-label={isChatbotActive ? 'lightspeed-close' : 'lightspeed-open'}
+          aria-label={
+            isChatbotActive ? t('tooltip.fab.close') : t('tooltip.fab.open')
+          }
           className={fabButton.fab}
           sx={{ borderRadius: '100% !important' }}
         >
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedFAB.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedFAB.tsx
@@ -22,6 +22,7 @@ import { ChatbotDisplayMode } from '@patternfly/chatbot';
 
 import { DOCKED_CONTENT_OFFSET } from '../const';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext';
+import { useTranslation } from '../hooks/useTranslation';
 import { LightspeedFABIcon } from './LightspeedIcon';
 
 const useStyles = makeStyles(theme => ({
@@ -56,6 +57,7 @@ const useStyles = makeStyles(theme => ({
  */
 
 export const LightspeedFAB = () => {
+  const { t } = useTranslation();
   const { isChatbotActive, toggleChatbot, displayMode } =
     useLightspeedDrawerContext();
   const fabButton = useStyles();
@@ -71,15 +73,17 @@ export const LightspeedFAB = () => {
       data-testid="lightspeed-fab"
     >
       <Tooltip
-        title={isChatbotActive ? 'Close Lightspeed' : 'Open Lightspeed'}
+        title={isChatbotActive ? t('tooltip.fab.close') : t('tooltip.fab.open')}
         placement="left"
       >
         <Fab
           color="primary"
           variant="circular"
           size="small"
           onClick={toggleChatbot}
-          aria-label={isChatbotActive ? 'lightspeed-close' : 'lightspeed-open'}
+          aria-label={
+            isChatbotActive ? t('tooltip.fab.close') : t('tooltip.fab.open')
+          }
           className={fabButton.fab}
           sx={{ borderRadius: '100% !important' }}
         >
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedFAB.test.tsx b/workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedFAB.test.tsx
@@ -68,7 +68,7 @@ describe('LightspeedFAB', () => {
     );
 
     expect(screen.getByTestId('lightspeed-fab')).toBeInTheDocument();
-    expect(screen.getByLabelText('lightspeed-open')).toBeInTheDocument();
+    expect(screen.getByLabelText('Open Lightspeed')).toBeInTheDocument();
   });
 
   it('should render FAB button when displayMode is docked', () => {
@@ -79,7 +79,7 @@ describe('LightspeedFAB', () => {
     );
 
     expect(screen.getByTestId('lightspeed-fab')).toBeInTheDocument();
-    expect(screen.getByLabelText('lightspeed-open')).toBeInTheDocument();
+    expect(screen.getByLabelText('Open Lightspeed')).toBeInTheDocument();
   });
 
   it('should not render FAB button when displayMode is embedded', () => {
@@ -99,7 +99,7 @@ describe('LightspeedFAB', () => {
       }),
     );
 
-    const fabButton = screen.getByLabelText('lightspeed-open');
+    const fabButton = screen.getByLabelText('Open Lightspeed');
     fireEvent.click(fabButton);
 
     expect(mockToggleChatbot).toHaveBeenCalledTimes(1);
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/de.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/de.ts
@@ -224,6 +224,8 @@ const lightspeedTranslationDe = createTranslationMessages({
     'tooltip.backToBottom': 'Zurück zum Ende',
     'tooltip.settings': 'Chatbot-Optionen',
     'tooltip.close': 'Schließen',
+    'tooltip.fab.open': 'Lightspeed öffnen',
+    'tooltip.fab.close': 'Lightspeed schließen',
     'modal.title.preview': 'Anhang in der Vorschau anzeigen',
     'modal.title.edit': 'Anhang bearbeiten',
     'icon.lightspeed.alt': 'Lightspeed-Symbol',
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/es.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/es.ts
@@ -225,6 +225,8 @@ const lightspeedTranslationEs = createTranslationMessages({
     'tooltip.backToBottom': 'Volver al final',
     'tooltip.settings': 'Opciones de chatbot',
     'tooltip.close': 'Cerrar',
+    'tooltip.fab.open': 'Abrir Lightspeed',
+    'tooltip.fab.close': 'Cerrar Lightspeed',
     'modal.title.preview': 'Previsualizar archivo adjunto',
     'modal.title.edit': 'Modificar archivo adjunto',
     'icon.lightspeed.alt': 'icono de Lightspeed',
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/fr.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/fr.ts
@@ -223,6 +223,8 @@ const lightspeedTranslationFr = createTranslationMessages({
     'tooltip.backToBottom': 'De haut en bas',
     'tooltip.settings': 'Options Chatbot',
     'tooltip.close': 'Fermer',
+    'tooltip.fab.open': 'Ouvrir Lightspeed',
+    'tooltip.fab.close': 'Fermer Lightspeed',
 
     'modal.title.preview': 'Aperçu de la pièce jointe',
     'modal.title.edit': 'Modifier la pièce jointe',
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/it.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/it.ts
@@ -224,6 +224,8 @@ const lightspeedTranslationIt = createTranslationMessages({
     'tooltip.backToBottom': 'Torna alla fine',
     'tooltip.settings': 'Opzioni chatbot',
     'tooltip.close': 'Chiudi',
+    'tooltip.fab.open': 'Apri Lightspeed',
+    'tooltip.fab.close': 'Chiudi Lightspeed',
     'modal.title.preview': 'Anteprima allegato',
     'modal.title.edit': 'Modifica allegato',
     'icon.lightspeed.alt': 'icona di lightspeed',
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/ja.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/ja.ts
@@ -222,6 +222,8 @@ const lightspeedTranslationJa = createTranslationMessages({
     'tooltip.backToBottom': '一番下に戻る',
     'tooltip.settings': 'チャットボットのオプション',
     'tooltip.close': '閉じる',
+    'tooltip.fab.open': 'Lightspeed を開く',
+    'tooltip.fab.close': 'Lightspeed を閉じる',
     'modal.title.preview': '添付ファイルのプレビュー',
     'modal.title.edit': '添付ファイルの編集',
     'icon.lightspeed.alt': 'lightspeed アイコン',
diff --git a/workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts b/workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts
@@ -245,6 +245,8 @@ export const lightspeedMessages = {
   'tooltip.backToBottom': 'Back to bottom',
   'tooltip.settings': 'Chatbot options',
   'tooltip.close': 'Close',
+  'tooltip.fab.open': 'Open Lightspeed',
+  'tooltip.fab.close': 'Close Lightspeed',
 
   // Modal titles
   'modal.title.preview': 'Preview attachment',

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
 +---
++
 +Internationalize the Lightspeed floating action button: tooltip and `aria-label` use `tooltip.fab.open` / `tooltip.fab.close`, with German, Spanish, French, Italian, and Japanese translations.
Original file line number	Diff line number	Diff line change
`@@ -30,8 +30,8 @@ import {`
`30`	`30`	`export type DisplayMode = 'Overlay' \| 'Dock to window' \| 'Fullscreen';`
`31`	`31`
`32`	`32`	`// Actions`
`33`		`-export async function openChatbot(page: Page) {`
`34`		`- await page.getByRole('button', { name: 'lightspeed-open' }).click();`
	`33`	`+export async function openChatbot(page: Page, t: LightspeedMessages) {`
	`34`	`+ await page.getByRole('button', { name: t['tooltip.fab.open'] }).click();`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`export async function selectDisplayMode(`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export class McpConfigureTokenPage {`
`48`	`48`	`mockOptions?: MockMcpServersOptions,`
`49`	`49`	`): Promise<void> {`
`50`	`50`	`await mockMcpServers(this.page, mcpList, mockOptions ?? {});`
`51`		`- await openChatbot(this.page);`
	`51`	`+ await openChatbot(this.page, this.t);`
`52`	`52`	`await selectDisplayMode(this.page, this.t, mode);`
`53`	`53`	`await openMcpSettingsPanel(this.page, this.t);`
`54`	`54`	`}`