[a11y]: Focus gets stuck in an interactive Tooltip in a Modal

Package

carbon-components-react

Browser

Chrome

Operating System

MacOS

Package version

10.46

Automated testing tool and ruleset

Manual testing

Assistive technology

No response

Description

When I tab to a tooltip on a modal and that tooltip contains an interactive element e.g. a link or a button, there is no way to tab out of the tooltip. Also if I press ESC, the whole modal closes, rather than just the tooltip.

I expect to be able to dismiss the Tooltip and tab around the rest of the modal elements with just the keyboard as input. Note if I mouse click on the modal, the tooltip does close and I can navigate around the modal again.

ESC should only close the tooltip, not the complete modal. If the modal is used to enter data, the user input could be easily lost with the current behaviour.

WCAG 2.1 Violation

No response

CodeSandbox example

https://7yieq.csb.app/

Steps to reproduce

Use the code sandbox sample to reproduce this issue. Click on the button to open the modal. Then tab to the tooltip and try to tab out of it. It is not possible - focus is trapped inside the Tooltip. Press ESC and note that the modal also closes which is incorrect behaviour.

codeSandbox sample:

import React, { useState } from "react";
import { render } from "react-dom";
import { Button, Modal, Tooltip } from "carbon-components-react";

const App = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open modal</Button>
      <Modal
        open={open}
        modalHeading="Add a custom domain"
        modalLabel="Account resources"
        primaryButtonText="Add"
        secondaryButtonText="Cancel"
        onRequestSubmit={() => setOpen(false)}
        onRequestClose={() => setOpen(false)}
      >
        <div>
          <Tooltip triggerText="tooltip text">
            <p>Tooltip text goes here </p>
            <a href="/">Learn More</a>
          </Tooltip>
          <p style={{ marginBottom: "1rem" }}>
            Custom domains direct requests for your apps in this Cloud Foundry
            organization to a URL that you own. A custom domain can be a shared
            domain, a shared subdomain, or a shared domain and host.
          </p>
        </div>
      </Modal>
    </div>
  );
};

render(<App />, document.getElementById("root"));

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[teresamonahan]

Thanks for reporting this in such detail @teresamonahan! This issue with esc bubbling has been addressed in #9875, should be released in 10.47

@tay1orjones Sorry I missed the duplicate issue in my search! Thanks for the fix 😃

[tay1orjones]

Thanks for reporting this in such detail @teresamonahan! This issue with esc bubbling has been addressed in https://github.com/carbon-design-system/carbon/pull/9875, should be released in 10.47