fix(NavItem): do not include aria-controls if the related element is not mounted (#40)

* test(TabContainerSpec): converted to use @testing-library/react

* test(ModalSpec): re-enables 'Focused state' tests

* fix(NavItem): do not include aria-controls if the related TabPanel is not mounted because of unmountOnExit

When using `unmountOnExit`, the inactive TabPanels are not mounted, therefore the aria-controls in NavItem would refer an element that doesn't exist.

* fix(NavItem): include aria-controls only for the active TabPanel when mountOnEnter is enabled

Author: giovannipiller

src/NavItem.tsx

@@ -7,6 +7,7 @@ import SelectableContext, { makeEventKey } from './SelectableContext';
 import { EventKey, DynamicRefForwardingComponent } from './types';
 import Button from './Button';
 import { dataAttr } from './DataKey';
+import TabContext from './TabContext';
 
 export interface NavItemProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -54,6 +55,7 @@ export function useNavItem({
 }: UseNavItemOptions) {
   const parentOnSelect = useContext(SelectableContext);
   const navContext = useContext(NavContext);
+  const tabContext = useContext(TabContext);
 
   let isActive = active;
   const props = { role } as any;
@@ -68,10 +70,21 @@ export function useNavItem({
     props[dataAttr('event-key')] = key;
 
     props.id = contextControllerId || id;
-    props['aria-controls'] = contextControlledId;
 
     isActive =
       active == null && key != null ? navContext.activeKey === key : active;
+
+    /**
+     * Simplified scenario for `mountOnEnter`.
+     *
+     * While it would make sense to keep 'aria-controls' for tabs that have been mounted at least
+     * once, it would also complicate the code quite a bit, for very little gain.
+     * The following implementation is probably good enough.
+     *
+     * @see https://github.com/react-restart/ui/pull/40#issuecomment-1009971561
+     */
+    if (isActive || (!tabContext?.unmountOnExit && !tabContext?.mountOnEnter))
+      props['aria-controls'] = contextControlledId;
   }
 
   if (props.role === 'tab') {

test/ModalSpec.js

@@ -336,7 +336,7 @@ describe('<Modal>', () => {
     );
   });
 
-  xdescribe('Focused state', () => {
+  describe('Focused state', () => {
     let focusableContainer = null;
 
     beforeEach(() => {