From 40ba1dd0b6e60289f2c53dbd37d095e9867d83c1 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 6 Apr 2023 14:32:46 +0200 Subject: [PATCH 1/8] separate semantics from styling to keep heading levels Signed-off-by: Emma Indal --- .../src/components/ActionsPage/ActionsPage.tsx | 18 +++++++++++++----- .../ListTasksPage/OwnerListPicker.tsx | 6 +++++- .../TemplateEditorPage/TemplateEditorIntro.tsx | 9 +++++---- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx index 3f21b75322..5e7f9810c5 100644 --- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx +++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx @@ -251,7 +251,9 @@ export const ActionsPage = () => { return ( <> - {name} + + {name} + {input.map((i, index) => (
{renderTable( @@ -275,13 +277,15 @@ export const ActionsPage = () => { ); return ( - + {action.id} {action.description && } {action.schema?.input && ( - Input + + Input + {renderTable( formatRows(`${action.id}.input`, action?.schema?.input), )} @@ -290,7 +294,9 @@ export const ActionsPage = () => { )} {action.schema?.output && ( - Output + + Output + {renderTable( formatRows(`${action.id}.output`, action?.schema?.output), )} @@ -299,7 +305,9 @@ export const ActionsPage = () => { {action.examples && ( }> - Examples + + Examples + diff --git a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx index a9e3917922..820c4d168d 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx @@ -99,7 +99,11 @@ export const OwnerListPicker = (props: { {filterGroups.map(group => ( - + {group.name} diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx index 61e6c46964..2a75c1bf2c 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx @@ -59,7 +59,8 @@ export function TemplateEditorIntro(props: EditorIntroProps) { > props.onSelect?.('form')}> - + Edit Template Form @@ -108,7 +109,7 @@ export function TemplateEditorIntro(props: EditorIntroProps) { props.onSelect?.('field-explorer')}> - + Custom Field Explorer @@ -122,7 +123,7 @@ export function TemplateEditorIntro(props: EditorIntroProps) { return (
- + Get started by choosing one of the options below
Date: Thu, 6 Apr 2023 14:53:32 +0200 Subject: [PATCH 2/8] fix invalid aria attributes for context menu Signed-off-by: Emma Indal --- .../ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx | 4 ++++ .../components/ScaffolderPage/ScaffolderPageContextMenu.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx index fc3c0249a0..7ccbe4ef8d 100644 --- a/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder-react/src/next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.tsx @@ -68,9 +68,12 @@ export function ScaffolderPageContextMenu( return ( <> Date: Thu, 6 Apr 2023 14:56:54 +0200 Subject: [PATCH 3/8] fix label for template type picker Signed-off-by: Emma Indal --- .../TemplateCategoryPicker/TemplateCategoryPicker.tsx | 10 ++++++++-- .../TemplateTypePicker/TemplateTypePicker.tsx | 10 ++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx index 028ce3a701..b850c3bcfe 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx @@ -58,10 +58,16 @@ export const TemplateCategoryPicker = () => { return ( - Categories + + Categories + setSelectedTypes(value)} diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx index e7c2c965f2..88ddef2b92 100644 --- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx +++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx @@ -58,10 +58,16 @@ export const TemplateTypePicker = () => { return ( - Categories + + Categories + setSelectedTypes(value)} From fe0654e05ead4f3cd556471cf75e6a28d15fcfdb Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 6 Apr 2023 15:14:18 +0200 Subject: [PATCH 4/8] add role attributes to menu and menu item Signed-off-by: Emma Indal --- .../src/components/ListTasksPage/OwnerListPicker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx index 820c4d168d..ee383569ee 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx @@ -107,12 +107,13 @@ export const OwnerListPicker = (props: { {group.name} - + {group.items.map(item => ( onSelectOwner(item.id as 'owned' | 'all')} selected={item.id === filter} className={classes.menuItem} From 0435174b06f98f626067e02c497c2d9fcdc00eac Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 6 Apr 2023 15:19:11 +0200 Subject: [PATCH 5/8] add changeset Signed-off-by: Emma Indal --- .changeset/gentle-walls-invent.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/gentle-walls-invent.md diff --git a/.changeset/gentle-walls-invent.md b/.changeset/gentle-walls-invent.md new file mode 100644 index 0000000000..82469df6d3 --- /dev/null +++ b/.changeset/gentle-walls-invent.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-scaffolder': patch +--- + +Accessibility issues identified using lighthouse fixed. From 1a760d42f0683853b5e39696e0343e2599573476 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 6 Apr 2023 15:48:45 +0200 Subject: [PATCH 6/8] change heading level in template form Signed-off-by: Emma Indal --- .../src/components/MultistepJsonForm/MultistepJsonForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx index 0924c4f2e6..ec95bad0e5 100644 --- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx @@ -172,7 +172,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => { aria-disabled="false" tabIndex={0} > - + {title} From e8b0cf39fe3c6f9c3eafb901bdc837c4b717a781 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 6 Apr 2023 15:49:09 +0200 Subject: [PATCH 7/8] add aria label to close button in template form Signed-off-by: Emma Indal --- .../src/components/TemplateEditorPage/TemplateFormPreviewer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx index a7e3c6a697..69433d5f51 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx @@ -194,7 +194,7 @@ export const TemplateFormPreviewer = ({ - +
From d35a9d79f3bafb9f3abce4800f0a58d9a35f98a8 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 6 Apr 2023 16:01:03 +0200 Subject: [PATCH 8/8] add aria label to close button in custom field explorer Signed-off-by: Emma Indal --- .../src/components/TemplateEditorPage/CustomFieldExplorer.tsx | 2 +- .../src/next/TemplateEditorPage/CustomFieldExplorer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx index c7138efb97..43b3b49bcf 100644 --- a/plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx +++ b/plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx @@ -144,7 +144,7 @@ export const CustomFieldExplorer = ({ - +
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx index 823d5b164a..bf5ffe97ea 100644 --- a/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx +++ b/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx @@ -140,7 +140,7 @@ export const CustomFieldExplorer = ({ - +