Skip to content

fix: code block hide the picker languages were not shown#688

Merged
BaskarMitrah merged 4 commits into
stagefrom
DEVSITE-2491
Jul 9, 2026
Merged

fix: code block hide the picker languages were not shown#688
BaskarMitrah merged 4 commits into
stagefrom
DEVSITE-2491

Conversation

@BaskarMitrah

@BaskarMitrah BaskarMitrah commented Jul 3, 2026

Copy link
Copy Markdown
Collaborator

@aem-code-sync

aem-code-sync Bot commented Jul 3, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@github-actions

github-actions Bot commented Jul 3, 2026

Copy link
Copy Markdown

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests
📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)



Test Coverage Report

Overall Coverage Summary

Metric Percentage Coverage
Statements 57.86% 3934/6798
Branches 85.88% 566/659
Functions 53.41% 133/249
Lines 57.86% 3934/6798

Coverage by File/Directory

File Statements Branches Functions Lines
blocks/accordion 96.73% 100% 100% 96.73%
blocks/announcement 76.69% 60% 100% 76.69%
blocks/banner 94.28% 62.5% 100% 94.28%
blocks/cards 92.04% 90% 100% 92.04%
blocks/carousel 77.8% 82.35% 71.42% 77.8%
blocks/code 81.81% 60% 100% 81.81%
blocks/columns 66.8% 76.31% 100% 66.8%
blocks/contributors 84.23% 56% 100% 84.23%
blocks/edition 91.37% 57.14% 100% 91.37%
blocks/fragment 17.03% 100% 0% 17.03%
blocks/image-text 57.5% 55.55% 100% 57.5%
blocks/info 96.87% 100% 100% 96.87%
blocks/info-card 100% 100% 100% 100%
blocks/info-columns 75% 100% 100% 75%
blocks/inlinealert 18.75% 100% 0% 18.75%
blocks/list 59.09% 85.71% 100% 59.09%
blocks/mini-resource-card 98% 87.5% 100% 98%
blocks/product-card 78.57% 94.11% 100% 78.57%
blocks/profile-card 96.29% 100% 100% 96.29%
blocks/site-hero 93.93% 80% 100% 93.93%
blocks/site-wide-banner 31.66% 20% 100% 31.66%
blocks/summary 98.36% 88.88% 100% 98.36%
blocks/tab 93.25% 96.87% 100% 93.25%
blocks/table 100% 84.61% 100% 100%
blocks/text 50% 83.33% 50% 50%
blocks/title 84% 66.66% 100% 84%
components 57.83% 78.68% 58.33% 57.83%
scripts 49.37% 95.32% 44.32% 49.37%

Coverage report generated at 2026-07-03T15:32:35.788Z

@BaskarMitrah BaskarMitrah changed the title fix: hide the picker languages were not shown fix: code block hide the picker languages were not shown Jul 3, 2026

@melissag-ensemble melissag-ensemble left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this fixes the bug indirectly and adds one risky change. The root cause is simpler than the diff suggests.

Root cause: CSS specificity, not JS

The existing select.classList.toggle('hidden', !areTabsGrouped) has never actually worked, because .hidden loses a specificity fight in codeblock.css: .control-bar select { display: flex } is (0,3,4) and out-specifies .hidden { display: none } at (0,3,3). So display: flex always applies and the picker never hides — that's the whole bug, and it explains why it "used to work" before the .control-bar select { display: flex } rule landed.

Minimal fix (pick one)

  • CSS: .hidden { display: none !important; }
  • JS: select.style.display = areTabsGrouped ? '' : 'none';

Optional empty-string guard (data-languages=""[""] → length 1): add .filter(Boolean) to the languages mapping.

What looks good

The aria-selected sync in the handleSelectChange rewrite is a real improvement — currently, changing the dropdown updates the visible panel but leaves the wrong tab highlighted. The rewrite (plus tab.setAttribute('heading', ...)) keeps the tab highlight in sync in both grouped and non-grouped modes. Happy to keep that.

One concern

Redefining areTabsGrouped to hasLanguagesParam && languages.length > 1 && languages.length === tabContents.length changes grouping semantics — e.g. a single data-languages="js" was grouped before and no longer is — which affects filterSelectOptions and the tab-dedup path. Can we keep the original grouping condition unless there's a specific reason it needed to change?

@aem-code-sync

aem-code-sync Bot commented Jul 7, 2026

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests
📁 test/blocks/code/code.test.js:

❌ Code block > code > data-playground attributes from class
      AssertionError: expected null to equal 'code-session'
        at n.<anonymous> (test/blocks/code/code.test.js:29:63)


📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/tab/tab-playground.test.js:

❌ Tab block playground metadata > extracts data-playground attributes via decoratePreformattedCode
      AssertionError: expected null to equal 'tab-session'
        at n.<anonymous> (test/blocks/tab/tab-playground.test.js:17:63)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)



Test Coverage Report

Overall Coverage Summary

Metric Percentage Coverage
Statements 57.84% 3934/6801
Branches 85.84% 570/664
Functions 53.01% 132/249
Lines 57.84% 3934/6801

Coverage by File/Directory

File Statements Branches Functions Lines
blocks/accordion 96.73% 100% 100% 96.73%
blocks/announcement 76.69% 60% 100% 76.69%
blocks/banner 94.28% 62.5% 100% 94.28%
blocks/cards 92.04% 90% 100% 92.04%
blocks/carousel 77.8% 82.35% 71.42% 77.8%
blocks/code 81.81% 60% 100% 81.81%
blocks/columns 66.8% 76.31% 100% 66.8%
blocks/contributors 84.23% 56% 100% 84.23%
blocks/edition 91.37% 57.14% 100% 91.37%
blocks/fragment 17.03% 100% 0% 17.03%
blocks/image-text 57.5% 55.55% 100% 57.5%
blocks/info 96.87% 100% 100% 96.87%
blocks/info-card 100% 100% 100% 100%
blocks/info-columns 75% 100% 100% 75%
blocks/inlinealert 18.75% 100% 0% 18.75%
blocks/list 59.09% 85.71% 100% 59.09%
blocks/mini-resource-card 98% 87.5% 100% 98%
blocks/product-card 78.57% 94.11% 100% 78.57%
blocks/profile-card 96.29% 100% 100% 96.29%
blocks/site-hero 93.93% 80% 100% 93.93%
blocks/site-wide-banner 36.58% 25% 100% 36.58%
blocks/summary 98.36% 88.88% 100% 98.36%
blocks/tab 93.25% 96.87% 100% 93.25%
blocks/table 100% 84.61% 100% 100%
blocks/text 50% 83.33% 50% 50%
blocks/title 84% 66.66% 100% 84%
components 57.83% 78.68% 58.33% 57.83%
scripts 49.2% 95.37% 43.78% 49.2%

Coverage report generated at 2026-07-07T06:25:21.589Z

@BaskarMitrah BaskarMitrah merged commit fc13b6c into stage Jul 9, 2026
1 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants