fix: support keyboard activation for marks

src/Marks/Mark.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import { KeyCode } from '@rc-component/util';
 import * as React from 'react';
 import SliderContext from '../context';
 import { getDirectionStyle } from '../util';
@@ -13,7 +14,7 @@ export interface MarkProps {
 
 const Mark: React.FC<MarkProps> = (props) => {
   const { prefixCls, style, children, value, onClick } = props;
-  const { min, max, direction, includedStart, includedEnd, included } =
+  const { min, max, direction, disabled, includedStart, includedEnd, included } =
     React.useContext(SliderContext);
 
   const textCls = `${prefixCls}-text`;
@@ -23,6 +24,9 @@ const Mark: React.FC<MarkProps> = (props) => {
 
   return (
     <span
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
       className={clsx(textCls, {
         [`${textCls}-active`]: included && includedStart <= value && value <= includedEnd,
       })}
@@ -31,7 +35,15 @@ const Mark: React.FC<MarkProps> = (props) => {
         e.stopPropagation();
       }}
       onClick={() => {
-        onClick(value);
+        if (!disabled) {
+          onClick(value);
+        }
+      }}
+      onKeyDown={(event) => {
+        if (!disabled && (event.which === KeyCode.ENTER || event.which === KeyCode.SPACE)) {
+          event.preventDefault();
+          onClick(value);
+        }
       }}
     >
       {children}

tests/marks.test.js

@@ -37,7 +37,9 @@ describe('marks', () => {
     const marks = { 0: '0', 30: '30', 100: '100' };
     const onChange = jest.fn();
     const onChangeComplete = jest.fn();
-    const { container } = render(<Slider marks={marks} onChange={onChange} onChangeComplete={onChangeComplete} />);
+    const { container } = render(
+      <Slider marks={marks} onChange={onChange} onChangeComplete={onChangeComplete} />,
+    );
     fireEvent.click(container.getElementsByClassName('rc-slider-mark-text')[1]);
     expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
       'aria-valuenow',
@@ -49,6 +51,48 @@ describe('marks', () => {
     expect(onChangeComplete).toHaveBeenCalledWith(30);
   });
 
+  it('should select marks with Enter and Space', () => {
+    const onChange = jest.fn();
+    const onChangeComplete = jest.fn();
+    const { container, getByRole } = render(
+      <Slider
+        marks={{ 0: 'Start', 30: 'Middle', 100: 'End' }}
+        onChange={onChange}
+        onChangeComplete={onChangeComplete}
+      />,
+    );
+
+    const middleMark = getByRole('button', { name: 'Middle' });
+    const endMark = getByRole('button', { name: 'End' });
+
+    expect(fireEvent.keyDown(middleMark, { key: 'Enter', keyCode: 13, which: 13 })).toBe(false);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-valuenow',
+      '30',
+    );
+    expect(fireEvent.keyDown(endMark, { key: ' ', keyCode: 32, which: 32 })).toBe(false);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-valuenow',
+      '100',
+    );
+    expect(onChange).toHaveBeenNthCalledWith(1, 30);
+    expect(onChange).toHaveBeenNthCalledWith(2, 100);
+    expect(onChangeComplete).toHaveBeenNthCalledWith(1, 30);
+    expect(onChangeComplete).toHaveBeenNthCalledWith(2, 100);
+  });
+
+  it('should expose disabled marks without adding them to the tab order', () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(<Slider disabled marks={{ 30: 'Middle' }} onChange={onChange} />);
+
+    const mark = getByRole('button', { name: 'Middle' });
+
+    expect(mark).toHaveAttribute('aria-disabled', 'true');
+    expect(mark).toHaveAttribute('tabindex', '-1');
+    fireEvent.keyDown(mark, { key: 'Enter', keyCode: 13, which: 13 });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   // TODO: not implement yet
   // zombieJ: since this test leave years but not implement. Could we remove this?
   // xit('should select correct value while click on marks in Ranger', () => {