diff --git a/workspaces/extensions/e2e-tests/utils/accessibility.ts b/workspaces/extensions/e2e-tests/utils/accessibility.ts
index 586d0c10c3..ed38579fa1 100644
--- a/workspaces/extensions/e2e-tests/utils/accessibility.ts
+++ b/workspaces/extensions/e2e-tests/utils/accessibility.ts
@@ -21,7 +21,6 @@ export async function runAccessibilityTests(
page: Page,
testInfo: TestInfo,
attachName = 'accessibility-scan-results.json',
- options: { skipFailures?: boolean } = { skipFailures: true },
) {
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
@@ -32,10 +31,8 @@ export async function runAccessibilityTests(
contentType: 'application/json',
});
- if (!options?.skipFailures) {
- expect(
- accessibilityScanResults.violations,
- 'Accessibility violations found',
- ).toEqual([]);
- }
+ expect(
+ accessibilityScanResults.violations,
+ 'Accessibility violations found',
+ ).toEqual([]);
}
diff --git a/workspaces/extensions/plugins/extensions/src/components/Badges.tsx b/workspaces/extensions/plugins/extensions/src/components/Badges.tsx
index ad4fe6cba3..0ad5fe9cca 100644
--- a/workspaces/extensions/plugins/extensions/src/components/Badges.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/Badges.tsx
@@ -116,7 +116,7 @@ export const BadgeChip = ({ plugin }: { plugin: ExtensionsPlugin }) => {
label={options.label}
variant="outlined"
size="small"
- title={options.tooltip}
+ aria-label={options.tooltip ?? options.label}
sx={{
cursor: 'pointer',
}}
@@ -142,7 +142,11 @@ export const BadgeTriange = ({ plugin }: { plugin: ExtensionsPlugin }) => {
-
+
{
}}
/>
theme.palette.action.disabled }}
>
@@ -111,6 +112,7 @@ export const DownloadPackageYaml = ({
theme.palette.text.primary }}
onClick={async () => {
try {
@@ -175,6 +177,7 @@ export const EditPackage = ({
theme.palette.action.disabled }}
>
@@ -199,6 +202,7 @@ export const EditPackage = ({
const viewIcon = (
theme.palette.text.primary }}
onClick={() =>
navigate(packagePathWithSearchParams, {
@@ -252,6 +256,7 @@ export const EditPackage = ({
theme.palette.text.primary }}
onClick={() =>
navigate(packagePathWithSearchParams, { state: { editAction: true } })
@@ -287,9 +292,16 @@ export const TogglePackage = ({
);
const disabledIcon = (
-
- {isPackageEnabled ? : }
-
+
);
@@ -388,13 +400,16 @@ export const TogglePackage = ({
: t('installedPackages.table.tooltips.enablePackage')
}
>
- theme.palette.text.primary }}
- onClick={handleToggle}
- >
- {isPackageEnabled ? : }
-
+ checked={isPackageEnabled}
+ onChange={handleToggle}
+ inputProps={{
+ 'aria-label': isPackageEnabled
+ ? t('installedPackages.table.tooltips.disablePackage')
+ : t('installedPackages.table.tooltips.enablePackage'),
+ }}
+ />
);
};
@@ -410,13 +425,16 @@ export const UninstallPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
: t('tooltips.missingDynamicArtifact' as any, { type: 'package' })
}
>
- theme.palette.action.disabled }}
- >
-
-
+
+ theme.palette.action.disabled }}
+ >
+
+
+
);
}
@@ -424,6 +442,7 @@ export const UninstallPackage = ({ pkg }: { pkg: InstalledPackageRow }) => {
return (
theme.palette.text.primary }}
onClick={() => {}}
>
diff --git a/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx b/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx
index 57b546f931..a5cbc1605e 100644
--- a/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/PluginCard.tsx
@@ -140,12 +140,26 @@ export const PluginCard = ({ plugin }: { plugin: ExtensionsPlugin }) => {
return (
`2px solid ${theme.palette.primary.main}`,
+ },
}}
onClick={() => navigate(pluginPath)}
+ onKeyDown={e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ navigate(pluginPath);
+ }
+ }}
>
diff --git a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx
index b088b36693..18cff6c8ad 100644
--- a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.test.tsx
@@ -38,20 +38,24 @@ const testPlugin: ExtensionsPlugin = {
describe('PluginIcon', () => {
it('should render without error', () => {
const { getByRole } = render();
- expect(getByRole('img')).toBeInTheDocument();
- expect(getByRole('img').style.backgroundImage).toEqual(
+ const img = getByRole('img');
+ expect(img).toBeInTheDocument();
+ expect(img).toHaveAttribute('aria-label', 'APIs with Test plugin');
+ expect(img.style.backgroundImage).toEqual(
'url("https://backstage.io/icons/test-plugin.png")',
);
});
- it('should render no image when icon is missing', () => {
+ it('should render fallback icon when icon is missing', () => {
const testPluginWithoutIcon = {
...testPlugin,
spec: { ...testPlugin.spec, icon: undefined },
};
- const { queryAllByRole } = render(
+ const { getByRole } = render(
,
);
- expect(queryAllByRole('img')).toHaveLength(0);
+ const img = getByRole('img');
+ expect(img).toBeInTheDocument();
+ expect(img).toHaveAttribute('aria-label', 'APIs with Test plugin');
});
});
diff --git a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx
index b8ced5793b..d4ac88e11d 100644
--- a/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx
+++ b/workspaces/extensions/plugins/extensions/src/components/PluginIcon.tsx
@@ -28,9 +28,13 @@ export const PluginIcon = ({
}) => {
const icon = plugin?.spec?.icon;
+ const title = plugin?.metadata?.title ?? plugin?.metadata?.name ?? '';
+
if (!icon) {
return (
@@ -88,24 +90,26 @@ export const TabPanel = ({
{Object.keys(item)[0]}
- {item?.[Object.keys(item)[0]]?.map?.(ex => (
- <>
-
- {ex.title}
- {ex.content !== 'string' && (
-
- )}
-
-
- >
- ))}
+ {item?.[Object.keys(item)[0]]?.map?.(
+ (ex: { title: string; content: string }, exIdx: number) => (
+
+
+ {ex.title}
+ {ex.content !== 'string' && (
+
+ )}
+
+
+
+ ),
+ )}
))
) : (