feat: support a11y for menu divider (#661)

* feat: support a11y for menu divider

* test: cover a11y support for divider

* Update tests/Menu.spec.tsx

chore: adapt to feedback

Co-authored-by: Amumu <[email protected]>

* test: update a11y test expect

* test: update snapshot

---------

Co-authored-by: phatIntern <[email protected]>
Co-authored-by: Amumu <[email protected]>

Author: 3 people

src/Divider.tsx

@@ -16,6 +16,7 @@ export default function Divider({ className, style }: DividerProps) {
 
   return (
     <li
+      role="separator"
       className={classNames(`${prefixCls}-item-divider`, className)}
       style={style}
     />

tests/Menu.spec.tsx

@@ -730,5 +730,21 @@ describe('Menu', () => {
 
     expect(document.activeElement).toBe(last(container.querySelectorAll('li')));
   });
+
+  it('should render a divider with role="separator"', () => {
+    const menuRef = React.createRef<MenuRef>();
+    const { container } = render(
+      <Menu ref={menuRef} activeKey="cat">
+        <MenuItem key="light">Light</MenuItem>
+        <Divider />
+        <MenuItem key="cat">Cat</MenuItem>
+      </Menu>,
+    );
+   // Get the divider element with the rc-menu-item-divider class
+   const divider = container.querySelector('.rc-menu-item-divider');
+
+   // Assert that the divider element with rc-menu-item-divider class has role="separator"
+   expect(divider).toHaveAttribute('role', 'separator');
+  });
 });
 /* eslint-enable */

tests/__snapshots__/Menu.spec.tsx.snap

@@ -76,6 +76,7 @@ HTMLCollection [
         </li>
         <li
           class="rc-menu-item-divider"
+          role="separator"
         />
         <li
           class="rc-menu-item"
@@ -190,6 +191,7 @@ HTMLCollection [
         </li>
         <li
           class="rc-menu-item-divider"
+          role="separator"
         />
         <li
           class="rc-menu-item"
@@ -304,6 +306,7 @@ HTMLCollection [
         </li>
         <li
           class="rc-menu-item-divider"
+          role="separator"
         />
         <li
           class="rc-menu-item"
@@ -424,6 +427,7 @@ HTMLCollection [
         </li>
         <li
           class="rc-menu-item-divider"
+          role="separator"
         />
         <li
           class="rc-menu-item"
@@ -614,6 +618,7 @@ HTMLCollection [
         </li>
         <li
           class="rc-menu-item-divider"
+          role="separator"
         />
         <li
           class="rc-menu-item"
@@ -728,6 +733,7 @@ HTMLCollection [
         </li>
         <li
           class="rc-menu-item-divider"
+          role="separator"
         />
         <li
           class="rc-menu-item"

tests/__snapshots__/Options.spec.tsx.snap

@@ -73,6 +73,7 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-divider"
+      role="separator"
     />
   </ul>,
   <div