fix(sidepanel): not to show tooltip when closed inline

[jessieyan]

Closes #3695

Summary

• not able to tab on content when side panel is closed

Change List (commits, features, bugs, etc)

• SidePanel.jsx added tabIndex and aria-hidden

Acceptance Test (how to verify the PR)

• go to side panel story
• uncheck isOpen
• choose inline
• click on frame and tab
• see any tooltip or any content showed up or focused

Regression Test (how to make sure this PR doesn't break old functionality)

• tests here

Things to look for during review

• Make sure all references to iot or bx class prefix is using the prefix variable
• (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
• UI should be checked in RTL mode to ensure the proper handling of layout and text.
• All strings should be translatable.
• The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
• Unit test should be written and should have a coverage of 90% or higher in all areas.
• All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
• Changes or new components should either write new or update existing documentation.
• PR should link and close out an existing issue

[jessieyan]

There are some cypress flaky tests failed. This is should be fixed in another PR in master. Will merge it when it's available in next.

[netlify]

✅ Deploy Preview for carbon-addons-iot-react ready!

Name	Link
🔨 Latest commit	5db31e2
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-addons-iot-react/deploys/6439633859e0890008d86e37
😎 Deploy Preview	https://deploy-preview-3744--carbon-addons-iot-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[herleraja]

LGTM.
but summary seems to be wrong :P copy-paste :P

[davidicus]

This looks good for the title component but we have to make sure none of the content is able to to be tabbed to when closed. I thought we had an issue for this but I am not able to find one.

[davidicus]

For the buttons that we control we can add the tabindex attribute based of the value of isOpen but for the user supplied content we will have to query and add. Perhaps in a hook. Something like this. We would need to test it.

useEffect(() => {
    const focusItems = document.querySelector(`.${baseClass}__action-bar').querySelectorAll('button, a[href], input, textarea, select, details,[tabindex]:not([tabindex="-1"]`);
    const focusItems2 = document.querySelector(`.${baseClass}__content').querySelectorAll('button, a[href], input, textarea, select, details,[tabindex]:not([tabindex="-1"]`);
    if (isOpen) {
      [...focusItems, ...focusItems2].filter(el => !el.hasAttribute('disabled')).forEach(e => { 
        e.setAttribute('tabindex', -1);
      })
    } else {
      [...focusItems, ...focusItems2].filter(el => !el.hasAttribute('disabled')).forEach(e => {
        e.setAttribute('tabindex', -1);
      })
    }
  }, [isOpen]);

I would also add aria-hidden attribute to the containers of all except for the toggle button. Those we will have to add just to the action button container.

[erzhan-temir-mamyrov]

LGTM 👍