fix(ui-drilldown): fix for prevent option selection when Drilldown or its sub-components get disabled prop

Author: git-nandor

packages/ui-drilldown/src/Drilldown/DrilldownGroup/__tests__/DrilldownGroup.test.tsx

@@ -234,6 +234,26 @@ describe('<Drilldown.Group />', () => {
       expect(option_1).not.toHaveAttribute('aria-disabled')
       expect(option_2).not.toHaveAttribute('aria-disabled')
     })
+
+    it('should not allow selection if the Drilldown.Group is disabled', async () => {
+      render(
+        <Drilldown rootPageId="page0">
+          <Drilldown.Page id="page0">
+            <Drilldown.Group id="group0" selectableType="multiple" disabled>
+              <Drilldown.Option id="opt1">Disabled Option</Drilldown.Option>
+            </Drilldown.Group>
+          </Drilldown.Page>
+        </Drilldown>
+      )
+      const optionItemContainer = screen.getByLabelText('Disabled Option')
+      const optionContent = screen.getByText('Disabled Option')
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+
+      await userEvent.click(optionContent)
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+    })
   })
 
   describe('role prop', () => {

packages/ui-drilldown/src/Drilldown/DrilldownOption/__tests__/DrilldownOption.test.tsx

@@ -231,6 +231,28 @@ describe('<Drilldown.Option />', () => {
 
       expect(option).toHaveAttribute('aria-disabled', 'true')
     })
+
+    it('should not allow selection if the Drilldown.Option itself is disabled', async () => {
+      render(
+        <Drilldown rootPageId="page0">
+          <Drilldown.Page id="page0">
+            <Drilldown.Group id="group0" selectableType="multiple">
+              <Drilldown.Option id="opt1" disabled>
+                Disabled Option
+              </Drilldown.Option>
+            </Drilldown.Group>
+          </Drilldown.Page>
+        </Drilldown>
+      )
+      const optionItemContainer = screen.getByLabelText('Disabled Option')
+      const optionContent = screen.getByText('Disabled Option')
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+
+      await userEvent.click(optionContent)
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+    })
   })
 
   describe('href prop', () => {

packages/ui-drilldown/src/Drilldown/DrilldownPage/__tests__/DrilldownPage.test.tsx

@@ -315,6 +315,26 @@ describe('<Drilldown.Page />', () => {
       })
     })
 
+    it('should not allow selection if the Drilldown.Page is disabled', async () => {
+      render(
+        <Drilldown rootPageId="page0">
+          <Drilldown.Page id="page0" disabled>
+            <Drilldown.Group id="group0" selectableType="multiple">
+              <Drilldown.Option id="opt1">Disabled Option</Drilldown.Option>
+            </Drilldown.Group>
+          </Drilldown.Page>
+        </Drilldown>
+      )
+      const optionItemContainer = screen.getByLabelText('Disabled Option')
+      const optionContent = screen.getByText('Disabled Option')
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+
+      await userEvent.click(optionContent)
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+    })
+
     it("shouldn't make header Back options disabled", async () => {
       render(
         <Drilldown rootPageId="page0">

packages/ui-drilldown/src/Drilldown/__tests__/Drilldown.test.tsx

@@ -183,6 +183,49 @@ describe('<Drilldown />', () => {
         expect(option).toHaveAttribute('aria-disabled', 'true')
       })
     })
+
+    it('should not allow selection if the main Drilldown is disabled', async () => {
+      render(
+        <Drilldown rootPageId="page0" disabled>
+          <Drilldown.Page id="page0">
+            <Drilldown.Group id="group0" selectableType="multiple">
+              <Drilldown.Option id="opt1">Disabled Option</Drilldown.Option>
+            </Drilldown.Group>
+          </Drilldown.Page>
+        </Drilldown>
+      )
+      const optionItemContainer = screen.getByLabelText('Disabled Option')
+      const optionContent = screen.getByText('Disabled Option')
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+
+      await userEvent.click(optionContent)
+
+      expect(optionItemContainer).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('should always allow back navigation even if the page is disabled', async () => {
+      render(
+        <Drilldown rootPageId="page0">
+          <Drilldown.Page id="page0" renderTitle="First Page">
+            <Drilldown.Option id="opt1" subPageId="page1">
+              Go to Disabled Page
+            </Drilldown.Option>
+          </Drilldown.Page>
+          <Drilldown.Page id="page1" renderTitle="Disabled Page" disabled>
+          </Drilldown.Page>
+        </Drilldown>
+      )
+    
+      // 1. Navigate to the disabled page
+      await userEvent.click(screen.getByText('Go to Disabled Page'))
+      expect(screen.getByText('Disabled Page')).toBeInTheDocument()
+    
+      await userEvent.click(screen.getByText('Back'))
+    
+      // 4. Verify we have successfully navigated back
+      expect(screen.getByText('First Page')).toBeInTheDocument()
+    })
   })
 
   describe('as prop', () => {

packages/ui-drilldown/src/Drilldown/index.tsx

@@ -787,13 +787,21 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     // TODO: this line can be removed when React 16 is no longer supported
     event.persist()
 
-    if (
-      !id ||
-      !selectedOption ||
-      selectedOption.props.disabled ||
-      (event.target as HTMLElement).getAttribute('disabled') ||
-      (event.target as HTMLElement).getAttribute('aria-disabled')
-    ) {
+    if (!id || !selectedOption) {
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+
+    const isOptionDisabled =
+    id !== this._headerBackId && (
+      this.props.disabled ||
+      this.currentPage?.disabled ||
+      selectedOption.groupProps?.disabled ||
+      selectedOption.props.disabled
+      )
+
+    if (isOptionDisabled) {
       event.preventDefault()
       event.stopPropagation()
       return