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 <yoyo837@hotmail.com> * test: update a11y test expect * test: update snapshot --------- Co-authored-by: phatIntern <phat.pham@saleshood.com> Co-authored-by: Amumu <yoyo837@hotmail.com>
react-component · Jul 31, 2023 · 7d70b6c · 7d70b6c
1 parent d896516
commit 7d70b6c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 0 deletions.
diff --git a/src/Divider.tsx b/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}
     />

diff --git a/tests/Menu.spec.tsx b/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 */
diff --git a/tests/__snapshots__/Menu.spec.tsx.snap b/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"

diff --git a/tests/__snapshots__/Options.spec.tsx.snap b/tests/__snapshots__/Options.spec.tsx.snap
@@ -73,6 +73,7 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-divider"
+      role="separator"
     />
   </ul>,
   <div