PasswordField: Fix button role (#37816)

* Fix button role

* Fix tests

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');
   });
 });

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={() => {