Skip to content

Commit 1679be3

Browse files
Lukas742Lukas742
authored
fix(Toolbar): announce number of items in overflow popover (#6544)
Fixes #5926 Also downports all translations.
1 parent 6fc5199 commit 1679be3

File tree

64 files changed

+638
-289
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+638
-289
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2159,13 +2159,13 @@ describe('AnalyticalTable', () => {
21592159
cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should(
21602160
'have.attr',
21612161
'aria-label',
2162-
'Name A Grouped, To expand the row, press the spacebar'
2162+
'Name A Grouped, To expand the row, press the spacebar.'
21632163
);
21642164
cy.get('[name="navigation-right-arrow"]').click();
21652165
cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should(
21662166
'have.attr',
21672167
'aria-label',
2168-
'Name A Grouped, To collapse the row, press the spacebar'
2168+
'Name A Grouped, To collapse the row, press the spacebar.'
21692169
);
21702170
cy.findByText('Name').click();
21712171
cy.findByText('Ungroup').shadow().findByRole('listitem').click({ force: true });

‎packages/main/src/components/DynamicPage/DynamicPage.stories.tsx

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -60,23 +60,23 @@ const meta = {
6060
<DynamicPageTitle
6161
actions={
6262
<>
63-
<Button key={'edit'} design={ButtonDesign.Emphasized}>
63+
<Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
6464
Edit
6565
</Button>
66-
<Button key={'delete'} design={ButtonDesign.Transparent}>
66+
<Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
6767
Delete
6868
</Button>
69-
<Button key={'copy'} design={ButtonDesign.Transparent}>
69+
<Button data-accessible-name key={'copy'} design={ButtonDesign.Transparent}>
7070
Copy
7171
</Button>
72-
<Button key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
72+
<Button data-accessible-name key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
7373
</>
7474
}
7575
navigationActions={
7676
<>
77-
<Button key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
78-
<Button key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
79-
<Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
77+
<Button data-accessible-name key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
78+
<Button data-accessible-name key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
79+
<Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
8080
</>
8181
}
8282
breadcrumbs={
@@ -158,10 +158,10 @@ export const WithVariants: Story = {
158158
<Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
159159
]);
160160
const [actionItems, setActionItems] = useState([
161-
<Button key={'edit'} design={ButtonDesign.Emphasized}>
161+
<Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
162162
Edit
163163
</Button>,
164-
<Button key={'delete'} design={ButtonDesign.Transparent}>
164+
<Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
165165
Delete
166166
</Button>
167167
]);
@@ -171,27 +171,37 @@ export const WithVariants: Story = {
171171
setNavigationItems(
172172
selectedVariant === 'Header Variant 2'
173173
? [
174-
<Button key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />,
175-
<Button key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />,
176-
<Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
174+
<Button
175+
data-accessible-name
176+
key={'fullscreen'}
177+
icon={fullscreenIcon}
178+
design={ButtonDesign.Transparent}
179+
/>,
180+
<Button
181+
data-accessible-name
182+
key={'exitFullscreen'}
183+
icon={exitFSIcon}
184+
design={ButtonDesign.Transparent}
185+
/>,
186+
<Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
177187
]
178-
: [<Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />]
188+
: [<Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />]
179189
);
180190
setActionItems(
181191
selectedVariant === 'Header Variant 1'
182192
? [
183-
<Button key={'edit'} design={ButtonDesign.Emphasized}>
193+
<Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
184194
Edit
185195
</Button>,
186-
<Button key={'delete'} design={ButtonDesign.Transparent}>
196+
<Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
187197
Delete
188198
</Button>
189199
]
190200
: [
191-
<Button key={'copy'} design={ButtonDesign.Transparent}>
201+
<Button data-accessible-name key={'copy'} design={ButtonDesign.Transparent}>
192202
Copy
193203
</Button>,
194-
<Button key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
204+
<Button data-accessible-name key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
195205
]
196206
);
197207
};
@@ -287,30 +297,38 @@ export const WithCustomOverflowButton: Story = {
287297
},
288298
actions: (
289299
<>
290-
<Button key={'edit'} design={ButtonDesign.Emphasized}>
300+
<Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
291301
Edit
292302
</Button>
293-
<Button key={'delete'} design={ButtonDesign.Transparent}>
303+
<Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
294304
Delete
295305
</Button>
296-
<Button key={'copy'} design={ButtonDesign.Transparent}>
306+
<Button data-accessible-name key={'copy'} design={ButtonDesign.Transparent}>
297307
Copy
298308
</Button>
299-
<Button key={'action'} icon={actionIcon} design={ButtonDesign.Transparent}>
309+
<Button data-accessible-name key={'action'} icon={actionIcon} design={ButtonDesign.Transparent}>
300310
Action
301311
</Button>
302-
<Button design={ButtonDesign.Transparent}>Create</Button>
303-
<Button design={ButtonDesign.Transparent}>Loooooong actions Button</Button>
312+
<Button data-accessible-name design={ButtonDesign.Transparent}>
313+
Create
314+
</Button>
315+
<Button data-accessible-name design={ButtonDesign.Transparent}>
316+
Loooooong actions Button
317+
</Button>
304318
</>
305319
),
306320
navigationActions: (
307321
<>
308-
<Button key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
309-
<Button key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
310-
<Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
311-
<Button design={ButtonDesign.Transparent}>UI5 Web Components For React</Button>
312-
<Button design={ButtonDesign.Transparent}>Navigation Actions Button</Button>
313-
<Button design={ButtonDesign.Transparent}>
322+
<Button data-accessible-name key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
323+
<Button data-accessible-name key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
324+
<Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
325+
<Button data-accessible-name design={ButtonDesign.Transparent}>
326+
UI5 Web Components For React
327+
</Button>
328+
<Button data-accessible-name design={ButtonDesign.Transparent}>
329+
Navigation Actions Button
330+
</Button>
331+
<Button data-accessible-name design={ButtonDesign.Transparent}>
314332
Loooooooooooooooooooooooooooooooooooong navigation actions Button
315333
</Button>
316334
</>

‎packages/main/src/components/ExpandableText/ExpandableText.cy.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ describe('ExpandableText', () => {
1717
);
1818
getText(
1919
renderWhitespace
20-
? ' If renderWhitespace is set to true, there will be thirteen white spaces in front and af… Show more'
21-
: 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show more'
20+
? ' If renderWhitespace is set to true, there will be thirteen white spaces in front and af… Show More'
21+
: 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More'
2222
);
2323
cy.mount(
2424
<ExpandableText
@@ -32,8 +32,8 @@ describe('ExpandableText', () => {
3232
);
3333
getText(
3434
renderWhitespace
35-
? ' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonu… Show more'
36-
: 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt… Show more'
35+
? ' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonu… Show More'
36+
: 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt… Show More'
3737
);
3838

3939
cy.mount(
@@ -49,13 +49,13 @@ describe('ExpandableText', () => {
4949

5050
it('expand/collapse', () => {
5151
cy.mount(<ExpandableText data-testid="et">{longText}</ExpandableText>);
52-
cy.findByText('Show more').click();
52+
cy.findByText('Show More').click();
5353
getText(
54-
' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat Show less'
54+
' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat Show Less'
5555
);
56-
cy.findByText('Show less').click();
56+
cy.findByText('Show Less').click();
5757
getText(
58-
'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show more'
58+
'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More'
5959
);
6060
});
6161

@@ -65,18 +65,18 @@ describe('ExpandableText', () => {
6565
{longText}
6666
</ExpandableText>
6767
);
68-
cy.findByText('Show more').should('have.attr', 'accessible-name', 'Show the full text').click();
68+
cy.findByText('Show More').should('have.attr', 'accessible-name', 'Show the full text').click();
6969

7070
getText(
71-
'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show less'
71+
'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show Less'
7272
);
7373
cy.get('[ui5-responsive-popover]').should('have.attr', 'open');
74-
cy.findByText('Show less').should('have.attr', 'accessible-name', 'Close the popover').click();
74+
cy.findByText('Show Less').should('have.attr', 'accessible-name', 'Close the popover').click();
7575
cy.realPress('Escape');
7676
getText(
77-
'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show more'
77+
'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More'
7878
);
79-
cy.findByText('Show more').should('have.attr', 'accessible-name', 'Show the full text');
79+
cy.findByText('Show More').should('have.attr', 'accessible-name', 'Show the full text');
8080
});
8181

8282
cypressPassThroughTestsFactory(ExpandableText);

‎packages/main/src/components/FilterBar/FilterBar.cy.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -244,19 +244,19 @@ describe('FilterBar.cy.tsx', () => {
244244
cy.findAllByText('SWITCH').should('have.length', 2);
245245
cy.findAllByText('SELECT').should('have.length', 2);
246246

247-
cy.findByPlaceholderText('Search for filters').typeIntoUi5Input('S{enter}');
247+
cy.findByPlaceholderText('Search for Filters').typeIntoUi5Input('S{enter}');
248248

249249
cy.findAllByText('INPUT').should('have.length', 1);
250250
cy.findAllByText('SWITCH').should('have.length', 2);
251251
cy.findAllByText('SELECT').should('have.length', 2);
252252

253-
cy.findByPlaceholderText('Search for filters').typeIntoUi5Input('W{enter}', { force: true });
253+
cy.findByPlaceholderText('Search for Filters').typeIntoUi5Input('W{enter}', { force: true });
254254

255255
cy.findAllByText('INPUT').should('have.length', 1);
256256
cy.findAllByText('SWITCH').should('have.length', 2);
257257
cy.findAllByText('SELECT').should('have.length', 1);
258258

259-
cy.findByPlaceholderText('Search for filters').shadow().find('[ui5-icon]').click();
259+
cy.findByPlaceholderText('Search for Filters').shadow().find('[ui5-icon]').click();
260260

261261
cy.findAllByText('INPUT').should('have.length', 2);
262262
cy.findAllByText('SWITCH').should('have.length', 2);

‎packages/main/src/components/FilterBar/FilterDialog.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
537537
<FlexBox direction={FlexBoxDirection.Column} className={classNames.subheaderContainer}>
538538
<Toolbar className={classNames.subheader} toolbarStyle={ToolbarStyle.Clear}>
539539
<Select
540+
data-accessible-name
540541
onChange={handleAttributeFilterChange}
541542
title={fieldsByAttributeText}
542543
accessibleName={fieldsByAttributeText}
@@ -558,10 +559,10 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
558559
</Option>
559560
</Select>
560561
<ToolbarSpacer />
561-
<Button design={ButtonDesign.Transparent} onClick={toggleValues} aria-live="polite">
562+
<Button data-accessible-name design={ButtonDesign.Transparent} onClick={toggleValues} aria-live="polite">
562563
{showValues ? hideValuesText : showValuesText}
563564
</Button>
564-
<SegmentedButton onSelectionChange={handleViewChange}>
565+
<SegmentedButton data-accessible-name onSelectionChange={handleViewChange}>
565566
<SegmentedButtonItem
566567
icon={listIcon}
567568
data-id="list"

‎packages/main/src/components/FilterBar/index.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -340,12 +340,13 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
340340
const ToolbarButtons = (
341341
<>
342342
{showGoOnFB && (
343-
<Button onClick={handleGoOnFb} design={ButtonDesign.Emphasized}>
343+
<Button data-accessible-name onClick={handleGoOnFb} design={ButtonDesign.Emphasized}>
344344
{goText}
345345
</Button>
346346
)}
347347
{!hideToggleFiltersButton && !hideToolbar && !isPhone && (
348348
<Button
349+
data-accessible-name
349350
onClick={handleToggle}
350351
design={ButtonDesign.Transparent}
351352
className={classNames.showFiltersBtn}
@@ -355,17 +356,23 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
355356
</Button>
356357
)}
357358
{showClearOnFB && (
358-
<Button onClick={handleClear} design={ButtonDesign.Transparent}>
359+
<Button data-accessible-name onClick={handleClear} design={ButtonDesign.Transparent}>
359360
{clearText}
360361
</Button>
361362
)}
362363
{showRestoreOnFB && (
363-
<Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
364+
<Button data-accessible-name onClick={handleFBRestore} design={ButtonDesign.Transparent}>
364365
{restoreText}
365366
</Button>
366367
)}
367368
{!hideFilterConfiguration && (
368-
<Button onClick={handleDialogOpen} aria-haspopup="dialog" design={ButtonDesign.Transparent} ref={filterBtnRef}>
369+
<Button
370+
data-accessible-name
371+
onClick={handleDialogOpen}
372+
aria-haspopup="dialog"
373+
design={ButtonDesign.Transparent}
374+
ref={filterBtnRef}
375+
>
369376
{`${filtersText}${
370377
activeFiltersCount && parseInt(activeFiltersCount as string, 10) > 0 ? ` (${activeFiltersCount})` : ''
371378
}`}

0 commit comments

Comments
 (0)