Skip to content

Commit 9471454

Browse files
authored
fix(ToolbarSeparator): use "separator" role to announce separator (#5810)
Fixes #5808
1 parent cecce78 commit 9471454

File tree

2 files changed

+3
-7
lines changed

2 files changed

+3
-7
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ describe('Toolbar', () => {
297297
<Text>Item3</Text>
298298
</Toolbar>
299299
);
300-
cy.findByLabelText('Separator').should('be.visible');
300+
cy.findByRole('separator').should('be.visible');
301301
});
302302

303303
it('toolbarStyle', () => {

packages/main/src/components/ToolbarSeparator/index.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
'use client';
22

3-
import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
3+
import { useStylesheet } from '@ui5/webcomponents-react-base';
44
import { clsx } from 'clsx';
55
import React, { forwardRef } from 'react';
6-
import { SEPARATOR } from '../../i18n/i18n-defaults.js';
76
import type { CommonProps } from '../../types/index.js';
87
import { classNames, styleData } from './ToolbarSeparator.module.css.js';
98

@@ -19,11 +18,8 @@ const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorPropTypes>((
1918

2019
useStylesheet(styleData, ToolbarSeparator.displayName);
2120
const separatorClasses = clsx(classNames.separator, className);
22-
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
2321

24-
return (
25-
<div ref={ref} style={style} className={separatorClasses} aria-label={i18nBundle.getText(SEPARATOR)} {...rest} />
26-
);
22+
return <div ref={ref} style={style} className={separatorClasses} role="separator" {...rest} />;
2723
});
2824
ToolbarSeparator.displayName = 'ToolbarSeparator';
2925
export { ToolbarSeparator };

0 commit comments

Comments
 (0)