fix(TabPanel): export role from useTabPanel hook (#45)

react-restart · Jan 25, 2022 · 32f21c7 · 32f21c7
1 parent adf9d2d
commit 32f21c7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/src/TabPanel.tsx b/src/TabPanel.tsx
@@ -60,13 +60,17 @@ export function useTabPanel({
   mountOnEnter,
   transition,
   unmountOnExit,
+  role = 'tabpanel',
   ...props
 }: TabPanelProps): [any, TabPanelMetadata] {
   const context = useContext(TabContext);
 
   if (!context)
     return [
-      props,
+      {
+        ...props,
+        role,
+      },
       {
         eventKey,
         isActive: active,
@@ -82,6 +86,7 @@ export function useTabPanel({
   return [
     {
       ...props,
+      role,
       id: getControlledId(eventKey!),
       'aria-labelledby': getControllerId(eventKey!),
     },
@@ -136,7 +141,6 @@ const TabPanel: DynamicRefForwardingComponent<'div', TabPanelProps> =
               <Component
                 {...tabPanelProps}
                 ref={ref}
-                role="tabpanel"
                 hidden={!isActive}
                 aria-hidden={!isActive}
               />

diff --git a/test/TabPanelSpec.tsx b/test/TabPanelSpec.tsx
@@ -12,6 +12,12 @@ describe('<TabPanel>', () => {
     getByText('test').should.exist;
   });
 
+  it('should render a TabPanel with role tabpanel', () => {
+    const { getByRole } = render(<TabPanel active>test</TabPanel>);
+
+    getByRole('tabpanel').should.exist;
+  });
+
   it('should not render if not active and mountOnEnter=true', () => {
     const { queryByText } = render(<TabPanel mountOnEnter>test</TabPanel>);
 
@@ -82,6 +88,44 @@ describe('<TabPanel>', () => {
   });
 
   describe('useTabPanel', () => {
+    it('should have role set to tabpanel', () => {
+      let props: any;
+      function Wrapper(wrapperProps: any) {
+        const [_props] = useTabPanel(wrapperProps);
+        props = _props;
+        return null;
+      }
+
+      render(<Wrapper />);
+
+      props.role.should.equal('tabpanel');
+    });
+
+    it('should have role tabpanel also within a context', () => {
+      let props: any;
+      function Wrapper(wrapperProps: any) {
+        const [_props] = useTabPanel(wrapperProps);
+        props = _props;
+        return null;
+      }
+
+      render(
+        <TabContext.Provider
+          value={{
+            onSelect: sinon.spy(),
+            mountOnEnter: true,
+            unmountOnExit: false,
+            getControlledId: sinon.spy(),
+            getControllerId: sinon.spy(),
+          }}
+        >
+          <Wrapper />
+        </TabContext.Provider>,
+      );
+
+      props.role.should.equal('tabpanel');
+    });
+
     it('should use mountOnEnter from props if provided', () => {
       let meta: any;
       function Wrapper(wrapperProps: any) {