TMS-1158: Remove micromodal close attribute from mobile-nav container

[eebbi]

Severa-ID: 2247
Severa-kuvaus: TMS-1158 Saavutettavuus: Päävalikon ja lomakkeen responsiivisuus
Task: https://hiondigital.atlassian.net/browse/TMS-1158

Description

Remove modal close attribute to prevent mobile nav closing when the user taps on the container when attempting to scroll down

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)

[gemini-code-assist]

Summary of Changes

Hello @eebbi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a bug where the mobile navigation menu would unexpectedly close when a user attempted to scroll its content. The issue was identified as being caused by an incorrect data-micromodal-close attribute applied to the navigation's main container. By removing this attribute, the mobile navigation now behaves as expected, allowing users to scroll its content without triggering an unintended closure.

Highlights

• Mobile Navigation Fix: Removed the data-micromodal-close attribute from the div element within the fly-out-nav container. This attribute was causing the mobile navigation to close unintentionally when users attempted to scroll within the container.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request aims to fix a usability issue where the mobile navigation closes when the user tries to scroll. While removing the data-micromodal-close attribute from the overlay is the correct approach, it might introduce a critical issue where the navigation can no longer be closed by clicking, as the close button seems to be missing the necessary attribute. Please see the detailed comment.

[gemini-code-assist]

Removing data-micromodal-close from this overlay is the correct approach to prevent the navigation from closing when a user taps it to scroll. However, this might leave the user with no way to close the navigation via click/tap. The dedicated close button on line 4 (.fly-out-nav__close) does not have the data-micromodal-close attribute. If this is not handled by custom JavaScript, the navigation will not be closable by this button, creating a critical usability issue. The data-micromodal-close attribute should be added to the <button> on line 4.