From 5475d7e2d1f3f7c8a499455ca764df9ac0509a0b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 30 Jul 2025 10:07:45 +0200 Subject: [PATCH 1/3] fix(SelectDialog): adjust heading level to `h1` --- packages/main/src/components/SelectDialog/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx index 963ef6cb5bf..c28dc821453 100644 --- a/packages/main/src/components/SelectDialog/index.tsx +++ b/packages/main/src/components/SelectDialog/index.tsx @@ -4,6 +4,7 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import InputType from '@ui5/webcomponents/dist/types/InputType.js'; import ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js'; +import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js'; import iconDecline from '@ui5/webcomponents-icons/dist/decline.js'; import iconSearch from '@ui5/webcomponents-icons/dist/search.js'; import { enrichEventWithDetails, useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base'; @@ -302,7 +303,10 @@ const SelectDialog = forwardRef((props, ref {i18nBundle.getText(CLEAR)} )} - + <Title + className={clsx(classNames.title, headerTextAlignCenter && classNames.titleCenterAlign)} + level={TitleLevel.H1} + > {headerText} {showClearButton && ( From a8a0c693379285e85dcba3f3712c5f43fcc655ee Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 30 Jul 2025 10:14:15 +0200 Subject: [PATCH 2/3] feat(SelectDialog): add `headerTextLevel` prop --- packages/main/src/components/SelectDialog/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx index c28dc821453..95f57126ffe 100644 --- a/packages/main/src/components/SelectDialog/index.tsx +++ b/packages/main/src/components/SelectDialog/index.tsx @@ -66,6 +66,14 @@ export interface SelectDialogPropTypes * Specifies the `headerText` alignment. */ headerTextAlignCenter?: boolean; + /** + * Defines the aria-level of the `headerText`. + * Available options are: `"H1"` to `"H6"`. + * This property does not influence the style of the `headerText`. + * + * @default "H1" + */ + headerTextLevel?: TitleLevel | keyof typeof TitleLevel; /** * Overwrites the default text for the confirmation button. */ @@ -150,6 +158,7 @@ const SelectDialog = forwardRef((props, ref growing, headerText, headerTextAlignCenter, + headerTextLevel = TitleLevel.H1, listProps = {}, selectionMode = ListSelectionMode.Single, numberOfSelectedItems, @@ -305,7 +314,7 @@ const SelectDialog = forwardRef((props, ref )} {headerText} From 71dfaba6231814564ca9be3a477ee206fa27f36f Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 30 Jul 2025 10:18:52 +0200 Subject: [PATCH 3/3] test --- .../src/components/SelectDialog/SelectDialog.cy.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx index d51bbb4a1cf..0539cd35c61 100644 --- a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx +++ b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx @@ -27,13 +27,20 @@ describe('SelectDialog', () => { ); cy.findByText('Select Dialog') .should('have.css', 'grid-column-start', 'titleStart') - .should('have.css', 'grid-column-end', 'titleCenter'); + .and('have.css', 'grid-column-end', 'titleCenter') + .and('have.attr', 'level', 'H1'); cy.mount( {listItems} , ); - cy.findByText('Select Dialog').should('have.css', 'grid-area', 'titleCenter'); + cy.findByText('Select Dialog').should('have.css', 'grid-area', 'titleCenter').and('have.attr', 'level', 'H1'); + cy.mount( + + {listItems} + , + ); + cy.findByText('Select Dialog').should('have.attr', 'level', 'H2'); }); it('selection', () => {