fix(NavBar): make back control keyboard accessible

Author: nrps9909

src/components/nav-bar/nav-bar.less

@@ -22,6 +22,11 @@
   }
 
   &-back {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
     display: flex;
     align-items: center;
     margin-right: 16px;

src/components/nav-bar/nav-bar.tsx

@@ -40,16 +40,20 @@ export const NavBar: FC<NavBarProps> = props => {
   return withNativeProps(
     mergedProps,
     <div className={classNames(classPrefix)}>
-      <div className={`${classPrefix}-left`} role='button'>
+      <div className={`${classPrefix}-left`}>
         {back !== null && (
-          <div className={`${classPrefix}-back`} onClick={mergedProps.onBack}>
+          <button
+            type='button'
+            className={`${classPrefix}-back`}
+            onClick={mergedProps.onBack}
+          >
             {mergedBackIcon && (
               <span className={`${classPrefix}-back-arrow`}>
                 {mergedBackIcon}
               </span>
             )}
-            <span aria-hidden='true'>{back}</span>
-          </div>
+            <span>{back}</span>
+          </button>
         )}
         {mergedProps.left}
       </div>

src/components/nav-bar/tests/nav-bar.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from 'testing'
+import { render, screen, userEvent } from 'testing'
 import NavBar from '..'
 import ConfigProvider from '../../config-provider'
 
@@ -9,6 +9,23 @@ describe('NavBar', () => {
     expect(screen.getByText('Title')).toBeInTheDocument()
   })
 
+  test('renders a keyboard-accessible back button', async () => {
+    const onBack = jest.fn()
+    render(
+      <NavBar back='Back' onBack={onBack}>
+        Title
+      </NavBar>
+    )
+
+    const backButton = screen.getByRole('button', { name: 'Back' })
+    expect(backButton).toHaveAttribute('type', 'button')
+
+    await userEvent.tab()
+    expect(backButton).toHaveFocus()
+    await userEvent.keyboard('{Enter}')
+    expect(onBack).toHaveBeenCalledTimes(1)
+  })
+
   describe('backIcon', () => {
     it('default', () => {
       const { baseElement } = render(<NavBar backIcon>Title</NavBar>)