fix(ToolbarSeparator): use "separator" role to announce separator (#…

…5810) Fixes #5808
SAP · May 16, 2024 · 9471454 · 9471454
1 parent cecce78
commit 9471454
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 7 deletions.
diff --git a/packages/main/src/components/Toolbar/Toolbar.cy.tsx b/packages/main/src/components/Toolbar/Toolbar.cy.tsx
@@ -297,7 +297,7 @@ describe('Toolbar', () => {
         <Text>Item3</Text>
       </Toolbar>
     );
-    cy.findByLabelText('Separator').should('be.visible');
+    cy.findByRole('separator').should('be.visible');
   });
 
   it('toolbarStyle', () => {

diff --git a/packages/main/src/components/ToolbarSeparator/index.tsx b/packages/main/src/components/ToolbarSeparator/index.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
+import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { forwardRef } from 'react';
-import { SEPARATOR } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../types/index.js';
 import { classNames, styleData } from './ToolbarSeparator.module.css.js';
 
@@ -19,11 +18,8 @@ const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorPropTypes>((
 
   useStylesheet(styleData, ToolbarSeparator.displayName);
   const separatorClasses = clsx(classNames.separator, className);
-  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
 
-  return (
-    <div ref={ref} style={style} className={separatorClasses} aria-label={i18nBundle.getText(SEPARATOR)} {...rest} />
-  );
+  return <div ref={ref} style={style} className={separatorClasses} role="separator" {...rest} />;
 });
 ToolbarSeparator.displayName = 'ToolbarSeparator';
 export { ToolbarSeparator };