search

adobe / aem-core-wcm-components

Standardized components to build websites with AEM.
https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html
Apache License 2.0
735 stars 743 forks source link

[Tabs][Accordion] Deep Linking not working #1432

Closed twhite313 closed 3 years ago

twhite313 commented 3 years ago

Bug Report

Current Behavior When deep linking to a tab in Core Tab, the tab itself is selected, but the tab panel does not get activated.

Expected behavior/code When deep linking to a specific tab, page should scroll to tab component and activate the selected tab.

Environment

Additional context / Screenshots Using URL - core-components.html#Configure-item-a69da3a1fc-tab

Third tab ('Controls') shows highlight, but active panel is still 'Calendar' tab-selected-not-active

Console showing first tab still has aria-selected="true" and cmp-tabs__tab--active. Should be on third tab instead tab-not-active

twhite313 commented 3 years ago

Installed Core 2.15, problem still present. Also tested Accordion; it has the same issue.

msagolj commented 3 years ago

@tim-white-esri thx for reporting, i was able to reproduce the issue with the tabs component. The accordion seems to have a similar issue, as you mentioned. First time it just scrolls to the accordion, requesting again opens the accordion tab. see attached movie. accordion_deeplink.zip

twhite313 commented 3 years ago

@msagolj -- Thank you for verification. I haven't checked, but I wouldn't be surprised if the behavior was the same for Carousel.

msagolj commented 3 years ago

@tim-white-esri according to #1011 it looks like deep linking was only introduced for tab and accordion.

tjameswhite commented 3 years ago

@vladbailescu -- I just tested core 2.16 and this issue does not seem to be resolved. @msagolj have you tested v2.16 yet?

Adding the Tab or panel ID to the URL is not producing desired effect. Tested tab ID:

Expected:

Actual:

Tested panel ID:

Expected:

Actual:

comanV commented 3 years ago

@vladbailescu -- I just tested core 2.16 and this issue does not seem to be resolved. @msagolj have you tested v2.16 yet?

Adding the Tab or panel ID to the URL is not producing desired effect. Tested tab ID:

  • page with Core Tab
  • Add tab id to URL: /core-components#MyTabs-item-e0b77b625b-tab

Expected:

  • page to anchor to tab, activate the selected tab and panel

Actual:

  • Page anchors to Core Tab, desired tab briefly hightlights, then resets to default tab.
  • Selected panel is never active, only the tab

Tested panel ID:

  • page with Core Tab
  • Add panel id to URL: #MyTabs-item-e0b77b625b

Expected:

  • page to anchor to Core Tab, activate selected panel

Actual:

  • page anchors to Core Tab, default panel active

@vladbailescu -- I just tested core 2.16 and this issue does not seem to be resolved. @msagolj have you tested v2.16 yet?

Adding the Tab or panel ID to the URL is not producing desired effect. Tested tab ID:

  • page with Core Tab
  • Add tab id to URL: /core-components#MyTabs-item-e0b77b625b-tab

Expected:

  • page to anchor to tab, activate the selected tab and panel

Actual:

  • Page anchors to Core Tab, desired tab briefly hightlights, then resets to default tab.
  • Selected panel is never active, only the tab

Tested panel ID:

  • page with Core Tab
  • Add panel id to URL: #MyTabs-item-e0b77b625b

Expected:

  • page to anchor to Core Tab, activate selected panel

Actual:

  • page anchors to Core Tab, default panel active

The new PR should solve the potential issues with the Tabs and Accordion components. Adding the tab /core-components#MyTabs-item-e0b77b625b-tab or the accordion /core-components#Myaccordion-6c8513b5eb-item-ac52ebd13f item to the URI should produce the desired effect.