fix(menu): make submenu scrollable

[blunteshwar]

Description

When a submenu inside a custom root menu contained multiple menu items, it was not scrollable, making some items inaccessible.
Fix
Added overflow-y: auto to ensure the submenu becomes scrollable when it has many menu items.

Related issue(s)

#4985

How has this been tested?

• Test case 1

  1. Go here
  2. open the submenu and check that it's scrolable

• Did it pass in Desktop?

• Did it pass in Mobile?

• Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 88793c3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Branch preview

• Documentation Site
• Storybook

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	249.693 kB	234.821 kB 🏆	235.183 kB
Scripts	61.961 kB	54.455 kB 🏆	54.721 kB
Stylesheet	51.545 kB	45.904 kB 🏆	46.00 kB
Document	6.237 kB	5.479 kB	5.469 kB 🏆
Font	126.951 kB	126.633 kB 🏆	126.642 kB

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

[coveralls]

Pull Request Test Coverage Report for Build 13306117485

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.003%) to 98.189%

---

Totals
Change from base Build 13290469074:	-0.003%
Covered Lines:	33099
Relevant Lines:	33528

---

💛 - Coveralls

[Rajdeepc]

@blunteshwar The structural element of this commit shouldn't be a chore rather this should be fix(menu) and it should surface up in the changelog for menu. Let me know if you have any questions. Please make sure you have a commit with fix(menu) for this.

[Rajdeepc]

Also can we attach the scrolling tests in Chrome, Firefox and Safari most importantly.

[Rajdeepc]

Is this padding expected?

[blunteshwar]

Yes, this is expected because in this particular example inside the menu item named Brooklyn there is a div which contains the list of menu items. I did this using a div to replicate the example used by the bug reporter here.

Since the bug was for custom root submenu so to replicate the same I used a div instead of a sp-menu. Similar kind of padding is here as well(this is a screenshot from the storybook deployed from main branch) because here as well a div is being used instead of a sp-menu