From 059ef4ee9a1a789cb9d107aad5c01adebc632223 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 12 Aug 2021 11:46:33 +0300
Subject: [PATCH] PasswordField: Fix button role (#37816)

* Fix button role

* Fix tests
---
 .../core/components/PasswordField/PasswordField.test.tsx    | 6 +++---
 public/app/core/components/PasswordField/PasswordField.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/PasswordField/PasswordField.test.tsx b/public/app/core/components/PasswordField/PasswordField.test.tsx
index 0f85ae02901..98af3c901ba 100644
--- a/public/app/core/components/PasswordField/PasswordField.test.tsx
+++ b/public/app/core/components/PasswordField/PasswordField.test.tsx
@@ -8,15 +8,15 @@ describe('PasswordField', () => {
     placeholder: 'enter password',
     'data-testid': 'password-field',
   };
-  it('should renders correctly', () => {
+  it('should render correctly', () => {
     render(<PasswordField {...props} />);
     expect(screen.getByTestId('password-field')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByRole('switch', { name: 'Show password' })).toBeInTheDocument();
   });
   it('should able to show password value if clicked on password-reveal icon', () => {
     render(<PasswordField {...props} />);
     expect(screen.getByTestId('password-field')).toHaveProperty('type', 'password');
-    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('switch', { name: 'Show password' }));
     expect(screen.getByTestId('password-field')).toHaveProperty('type', 'text');
   });
 });
diff --git a/public/app/core/components/PasswordField/PasswordField.tsx b/public/app/core/components/PasswordField/PasswordField.tsx
index 3ba84eb1ba4..ec32963c364 100644
--- a/public/app/core/components/PasswordField/PasswordField.tsx
+++ b/public/app/core/components/PasswordField/PasswordField.tsx
@@ -29,7 +29,7 @@ export const PasswordField: FC<Props> = React.forwardRef<HTMLInputElement, Props
             name={showPassword ? 'eye-slash' : 'eye'}
             type="button"
             aria-controls={id}
-            aria-role="switch"
+            role="switch"
             aria-checked={showPassword}
             aria-label="Show password"
             onClick={() => {