Skip to content

Commit f12fc8d

Browse files
authored
feat(VariantItem): add applyAutomaticallyText prop (#4779)
This PR also replaces `aria-label` if `accessibleName` is available on the web component.
1 parent 168febf commit f12fc8d

File tree

4 files changed

+42
-8
lines changed

4 files changed

+42
-8
lines changed

packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
5757
global,
5858
isDefault,
5959
applyAutomatically,
60+
applyAutomaticallyText,
6061
author,
6162
setInvalidVariants,
6263
hideDelete,
@@ -171,7 +172,7 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
171172
<Icon name={favoriteIcon} style={{ color: ThemingParameters.sapContent_NonInteractiveIconColor }} />
172173
) : (
173174
<Icon
174-
aria-label={a11yFavoriteText}
175+
accessibleName={a11yFavoriteText}
175176
title={iconName === favoriteIcon ? favoriteIconTitleText : unfavoriteIconTitleText}
176177
name={iconName}
177178
interactive
@@ -186,7 +187,7 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
186187
{showSetAsDefault && (
187188
<TableCell>
188189
<RadioButton
189-
aria-label={a11yStandardText}
190+
accessibleName={a11yStandardText}
190191
checked={defaultView !== undefined ? defaultView === children : isDefault}
191192
onChange={handleDefaultChange}
192193
/>
@@ -195,9 +196,10 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
195196
{showApplyAutomatically && (
196197
<TableCell>
197198
<CheckBox
198-
aria-label={a11yApplyAutomaticallyText}
199+
accessibleName={a11yApplyAutomaticallyText}
199200
checked={applyAutomatically}
200201
onChange={handleApplyAutomaticallyChange}
202+
text={applyAutomaticallyText}
201203
/>
202204
</TableCell>
203205
)}

packages/main/src/components/VariantManagement/VariantItem.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export interface VariantItemPropTypes extends Omit<StandardListItemPropTypes, 'c
3838
* Indicates if the variant should be applied automatically on selection.
3939
*/
4040
applyAutomatically?: boolean;
41+
/**
42+
* Text displayed next to the "Apply Automatically" checkbox inside the "Manage Views" dialog.
43+
*/
44+
applyAutomaticallyText?: string;
4145
/**
4246
* If set to false, the user is allowed to change the item's data.
4347
*
@@ -75,6 +79,7 @@ const VariantItem = forwardRef<StandardListItemDomRef, VariantItemPropTypes>((pr
7579
global,
7680
labelReadOnly,
7781
applyAutomatically,
82+
applyAutomaticallyText,
7883
readOnly,
7984
selected,
8085
children,
@@ -101,6 +106,7 @@ const VariantItem = forwardRef<StandardListItemDomRef, VariantItemPropTypes>((pr
101106
data-global={global}
102107
data-label-read-only={labelReadOnly}
103108
data-apply-automatically={applyAutomatically}
109+
data-apply-automatically-text={applyAutomaticallyText}
104110
data-read-only={readOnly}
105111
data-children={children}
106112
data-hide-delete={hideDelete}

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ describe('VariantManagement', () => {
5959
cy.findAllByTitle('Unselected as Favorite').eq(0).click();
6060
cy.findAllByPlaceholderText('View').eq(0).shadow().find('input').type(' Updated!', { force: true });
6161

62-
cy.findAllByLabelText('Use as standard view').eq(0).click();
63-
cy.findAllByLabelText('Apply Automatically').eq(0).click();
62+
cy.get('[accessible-name="Use as standard view"]').eq(0).click();
63+
cy.get('[accessible-name="Apply Automatically"]').eq(0).click();
6464

6565
cy.findByText('Save').click();
6666
cy.get('@onSaveManageViews').should('have.been.calledOnce');
@@ -375,6 +375,14 @@ describe('VariantManagement', () => {
375375
{ rowId: 'HideDelete - false & global - true', props: { hideDelete: false, global: true } },
376376
{ rowId: 'Global', props: { global: true } },
377377
{ rowId: 'Apply Automatically (List item)', props: { applyAutomatically: true } },
378+
{
379+
rowId: 'Apply Automatically with text',
380+
props: { applyAutomatically: true, applyAutomaticallyText: 'applyAutomaticallyText' }
381+
},
382+
{
383+
rowId: 'Apply Automatically (false) with text',
384+
props: { applyAutomatically: false, applyAutomaticallyText: 'applyAutomaticallyText' }
385+
},
378386
{ rowId: 'Author', props: { author: 'author' } },
379387
{
380388
rowId: 'All props',
@@ -423,7 +431,16 @@ describe('VariantManagement', () => {
423431
const manageViewsRowTest = (variantItems, showOnlyFavorites) => {
424432
variantItems.forEach((item) => {
425433
const { rowId, props } = item;
426-
const { favorite, labelReadOnly, isDefault, hideDelete, global, applyAutomatically, author } = props;
434+
const {
435+
favorite,
436+
labelReadOnly,
437+
isDefault,
438+
hideDelete,
439+
global,
440+
applyAutomatically,
441+
applyAutomaticallyText,
442+
author
443+
} = props;
427444

428445
cy.get(`ui5-table-row[data-id="${rowId}"]`).as('row');
429446
if (showOnlyFavorites) {
@@ -481,6 +498,9 @@ describe('VariantManagement', () => {
481498
} else {
482499
cy.get('@row').find('[ui5-checkbox]').findShadowInput().should('not.be.checked');
483500
}
501+
if (applyAutomaticallyText) {
502+
cy.get('@row').find('[ui5-checkbox]').should('have.attr', 'text', 'applyAutomaticallyText');
503+
}
484504

485505
if (author) {
486506
cy.get('@row').findByText(author).should('be.visible');
@@ -498,7 +518,7 @@ describe('VariantManagement', () => {
498518
cy.findByText('Save').click();
499519
cy.get('@saveView').should('have.been.calledOnce');
500520
cy.findByText(
501-
'{"deletedVariants":[],"prevVariants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}],"updatedVariants":[],"variants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}]}'
521+
'{"deletedVariants":[],"prevVariants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"applyAutomatically":true,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically with text"},{"applyAutomatically":false,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically (false) with text"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}],"updatedVariants":[],"variants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"applyAutomatically":true,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically with text"},{"applyAutomatically":false,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically (false) with text"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}]}'
502522
);
503523

504524
cy.mount(<TestComp onSaveManageViews={onSaveView} showOnlyFavorites />);
@@ -509,7 +529,7 @@ describe('VariantManagement', () => {
509529
cy.findByText('Save').click();
510530
cy.get('@saveView').should('have.been.calledTwice');
511531
cy.findByText(
512-
'{"deletedVariants":[],"prevVariants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}],"updatedVariants":[],"variants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}]}'
532+
'{"deletedVariants":[],"prevVariants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"applyAutomatically":true,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically with text"},{"applyAutomatically":false,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically (false) with text"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}],"updatedVariants":[],"variants":[{"children":"Default VariantItem"},{"labelReadOnly":true,"children":"LabelReadOnly"},{"favorite":true,"children":"Favorite"},{"favorite":true,"isDefault":true,"children":"Favorite & isDefault"},{"isDefault":true,"children":"IsDefault"},{"hideDelete":true,"children":"HideDelete"},{"hideDelete":false,"global":true,"children":"HideDelete - false & global - true"},{"global":true,"children":"Global"},{"applyAutomatically":true,"children":"Apply Automatically (List item)"},{"applyAutomatically":true,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically with text"},{"applyAutomatically":false,"applyAutomaticallyText":"applyAutomaticallyText","children":"Apply Automatically (false) with text"},{"author":"author","children":"Author"},{"labelReadOnly":true,"favorite":true,"isDefault":true,"hideDelete":true,"global":true,"applyAutomatically":true,"author":"bla","children":"All props"}]}'
513533
);
514534
});
515535

packages/main/src/components/VariantManagement/VariantManagement.stories.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export const Default: Story = {
2929
Favorite & labelReadOnly
3030
</VariantItem>
3131
<VariantItem applyAutomatically>ApplyAutomatically</VariantItem>
32+
<VariantItem
33+
applyAutomatically
34+
applyAutomaticallyText="Describe your exceptions that deviate from the standard behavior here."
35+
>
36+
applyAutomatically & applyAutomaticallyText
37+
</VariantItem>
3238
<VariantItem readOnly>ReadOnly</VariantItem>
3339
<VariantItem global>Global</VariantItem>
3440
<VariantItem global readOnly>

0 commit comments

Comments
 (0)