How to set focus on carousel containing image or a div so that i can navigate using arrow keys?

I have been working on Ant Carousel :- https://ant.design/components/carousel/ . Carousel is placed inside a Modal. I have few children div. Initially arrow keys do not work for navigation. If I click on content of div, then they start to work.

But if div contains image, when clicked on it focus is not set to carousel, also if there is any other text in that div or slide, clicking it sets carousel as focus.

I have tried using focusOnSelect of carousel. Also set refs to Carousel then called this.xyzRef.current.focus() on componentDidMount() but it gives me

error :- A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://reactjs.org/docs/cross-origin-errors.html

code :- https://codesandbox.io/s/pmww228ynj

//JSX file

export default class ABCD extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = React.createRef();
    };


  componentDidMount() {
    console.log(this.textInput);
  }

  render() {
    return (
      <Modal visible wrapClassName="abc">
        <Carousel
          id="abc"
          ref={this.textInput}
          draggable
          arrows
          dots={false}
          onSelectFocus={true}
          infinite={false}
          focusOnSelect
        >
          <div className="slick-slide">
            <div>
              <img
                alt="ads"
                src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
              />
              <h3>Page 1</h3>
            </div>
          </div>
          <div>
            <h3>Page 2</h3>
          </div>
          <div>
            <h3>Page 3</h3>
          </div>
          <div>
            <h3>Page 4</h3>
          </div>
        </Carousel>
      </Modal>
    );
  }
}

I expect the output to be able to use left and right arrow keys to navigate in carousel

Answer

It seems there is no possible solution for that issue.

And the problem is with antd.

The Carousel in antd is slick and it has no way to set focus on the inner element. And had bad accessibility(can’t navigate with tab).

Problem with set focus to inner modal component

Advertisement

Answer