fix(Token): suppress close button a11y issue(#3337)

skbkontur · Feb 19, 2024 · b7de35f · b7de35f
1 parent c11465b
commit b7de35f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
@@ -97,15 +97,10 @@ export class Token extends React.Component<TokenProps> {
     const theme = this.theme;
 
     const validation = getValidation(error, warning);
+    const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + children;
 
     const icon = isTheme2022(theme) ? (
-      <CloseButtonIcon
-        aria-label={this.locale.removeButtonAriaLabel}
-        side={16}
-        color="inherit"
-        colorHover="inherit"
-        tabbable={false}
-      />
+      <CloseButtonIcon side={16} color="inherit" colorHover="inherit" role="none" />
     ) : (
       <CrossIcon />
     );
@@ -149,7 +144,7 @@ export class Token extends React.Component<TokenProps> {
           <span className={styles.text(this.theme)}>{children}</span>
           <span
             role={isTheme2022(theme) ? undefined : 'button'}
-            aria-label={isTheme2022(theme) ? undefined : this.locale.removeButtonAriaLabel}
+            aria-label={isTheme2022(theme) ? undefined : removeButtonAriaLabel}
             className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}
             onClick={this.onRemoveClick}
             data-tid={TokenDataTids.removeIcon}

diff --git a/packages/react-ui/components/Token/__tests__/Token-test.tsx b/packages/react-ui/components/Token/__tests__/Token-test.tsx
@@ -47,30 +47,39 @@ describe('Token', () => {
     });
 
     it('has correct value on close button aria-label attribute (ru)', () => {
-      render(<Token />);
+      const tokenName = 'name';
+      render(<Token>{tokenName}</Token>);
 
-      expect(screen.getByRole('button')).toHaveAttribute('aria-label', TokenLocalesRu.removeButtonAriaLabel);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-label',
+        TokenLocalesRu.removeButtonAriaLabel + ' ' + tokenName,
+      );
     });
 
     it('has correct value on close button aria-label attribute (en)', () => {
+      const tokenName = 'name';
       render(
         <LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
-          <Token />
+          <Token>{tokenName}</Token>
         </LocaleContext.Provider>,
       );
 
-      expect(screen.getByRole('button')).toHaveAttribute('aria-label', TokenLocalesEn.removeButtonAriaLabel);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-label',
+        TokenLocalesEn.removeButtonAriaLabel + ' ' + tokenName,
+      );
     });
 
     it('sets custom value for `closeButtonAriaLabel` locale', () => {
       const customAriaLabel = 'test';
+      const tokenName = 'name';
       render(
         <LocaleContext.Provider value={{ locale: { Token: { removeButtonAriaLabel: customAriaLabel } } }}>
-          <Token />
+          <Token>{tokenName}</Token>
         </LocaleContext.Provider>,
       );
 
-      expect(screen.getByRole('button')).toHaveAttribute('aria-label', customAriaLabel);
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', customAriaLabel + ' ' + tokenName);
     });
   });
 });