Fixed issue .ui-state-focus missing from main navigation in 2.4.5 and 2.4.6 #37571

rostilos · 2023-06-02T16:06:30Z

Description (*)

The bug was reproduced because the updated version of jquery-ui menu widget now adds the "ui-state-active" class instead of "ui-state-focus" to the element with focus. When the jquery-ui library was updated (somewhere between version 2.4.3 and 2.4.5) these edits were added but the styles were not changed.
In this PR, the selectors for the "ui-state-focus" class have been replaced by "ui-state-active" because the "ui-state-focus" class is no longer added to the menu item with focus in the menu functionality of the jquery-ui library widget

Related Pull Requests

Fixed Issues (if relevant)

Fixes .ui-state-focus missing from main navigation in 2.4.5 and 2.4.6 #37300

Manual testing scenarios (*)

Install a vanilla Magento version 2.4.5 - 2.4.6
Open developer tools and inspect a submenu item in the main navigation to watch classes
Using keyboard tab to the main menu then use arrow keys to navigate to submenu items
When focus is on a menu/submenu item a class should be added of "ui-state-focus" ( Also the menu item with focus must be visually marked )

Questions or comments

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
All automated tests passed successfully (all builds are green)

m2-assistant · 2023-06-02T16:06:35Z

Hi @rostilos. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

rostilos · 2023-06-02T16:06:46Z

@magento run all tests

magento-automated-testing · 2023-06-02T16:06:54Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

rostilos · 2023-06-02T16:25:44Z

@magento run all tests

magento-automated-testing · 2023-06-02T16:25:52Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

schizek · 2023-06-27T15:16:24Z

@rostilos I don't think just styling the ui-state-active class will work here since active and focus have different meanings. In this case, if you put focus on a child menu item, the parent item is still "active", so the styles would apply to both which will be an issue. Ideally the ui-state-focus class would return so that could be styled separately from ui-state-active.

rostilos · 2023-07-10T14:41:03Z

@schizek
A jquery-ui menu widget is used for the menu functionality. The current version's widget functionality contains a method that adds a ui-state-active class for active menu items, and for items in focus ( jQuery UI Menu 1.13.1 ) :

Is it really necessary to rewrite the root functionality of a third-party widget if it's only about the class name?
In previous versions of the widget, this method actually added the ui-state-focus class to the element in focus ( jQuery UI Menu - v1.10.4) :

And yes, both the parent component and the child component are given the same class. This may not be correct, but is it worth rewriting the core functionality with a plugin to do this? If this is an acceptable option, I can do it this way as it was in an older version, just clarifying.

engcom-Hotel · 2023-10-25T09:15:59Z

@magento run all tests

magento-automated-testing · 2023-10-25T09:16:12Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Hotel

Hello @rostilos,

Thanks for the contribution!

Please review my comment below.

Thanks

engcom-Hotel · 2023-10-25T14:46:03Z

lib/web/css/source/lib/_navigation.less

@@ -99,7 +99,7 @@

            &.active {
                .all-category {
-                    .ui-state-focus {
+                    .ui-state-active {


We can change the class name in backward-compatible way like the below:

.ui-state-active, .ui-state-focus

engcom-Echo · 2023-10-31T09:00:05Z

@rostilos

We have verify PR changes and follow steps for verification mentioned here. But with PR when focus is on a menu/submenu item a class should be added of "ui-state-focus" ( Also the menu item with focus must be visually marked ) does not work.

Please have a look at below video and let us know if we have missed anything here

screen-capture.1.mp4

engcom-Echo · 2023-11-02T06:34:27Z

@rostilos moving it on hold on the basis of above comment

engcom-Echo · 2023-11-15T05:45:04Z

@rostilos did you get a chance to have a look on comment?

rostilos · 2023-11-15T07:40:35Z

@engcom-Echo Yes, I have looked at it, and will try to fix it as soon as possible, can't spare the time right now, but will give an update soon. Thanks

engcom-Echo · 2023-12-26T06:05:12Z

@rostilos did you get a chance to have a look on #37571 (comment)?

engcom-Echo · 2024-01-02T04:54:33Z

As PR need some work to be done based on #37571 (comment) Moving this PR in draft state.

engcom-Echo · 2024-01-18T06:08:29Z

@rostilos We are closing this PR for now as it require some changes based on comment
Once you are ready please feel free to reopen.

m2-github-services added Partner: Perspective partners-contribution Pull Request is created by Magento Partner labels Jun 2, 2023

m2-community-project bot added Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Progress: pending review labels Jun 2, 2023

rostilos marked this pull request as draft June 2, 2023 16:14

changed style selector for focused menu item to "ui-state-active"

65fc2ca

rostilos force-pushed the fix-for-issue-37300 branch from 47fb356 to 65fc2ca Compare June 2, 2023 16:22

rostilos marked this pull request as ready for review June 2, 2023 16:25

sinhaparul added the Project: Community Picked PRs upvoted by the community label Oct 13, 2023

Merge branch '2.4-develop' into fix-for-issue-37300

9b25f81

engcom-Hotel self-requested a review October 25, 2023 10:19

m2-community-project bot added Progress: review and removed Progress: pending review labels Oct 25, 2023

engcom-Hotel requested changes Oct 25, 2023

View reviewed changes

m2-community-project bot added Progress: needs update and removed Progress: review labels Oct 26, 2023

engcom-Echo self-assigned this Oct 31, 2023

m2-community-project bot added Progress: on hold and removed Progress: needs update labels Nov 2, 2023

engcom-Echo marked this pull request as draft January 2, 2024 04:54

engcom-Echo closed this Jan 18, 2024

m2-community-project bot removed the Progress: on hold label Jan 18, 2024

Fixed issue .ui-state-focus missing from main navigation in 2.4.5 and 2.4.6 #37571

Fixed issue .ui-state-focus missing from main navigation in 2.4.5 and 2.4.6 #37571

Uh oh!

Conversation

rostilos commented Jun 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

Questions or comments

Contribution checklist (*)

Uh oh!

m2-assistant bot commented Jun 2, 2023

Uh oh!

rostilos commented Jun 2, 2023

Uh oh!

magento-automated-testing bot commented Jun 2, 2023

Uh oh!

rostilos commented Jun 2, 2023

Uh oh!

magento-automated-testing bot commented Jun 2, 2023

Uh oh!

schizek commented Jun 27, 2023

Uh oh!

rostilos commented Jul 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

engcom-Hotel commented Oct 25, 2023

Uh oh!

magento-automated-testing bot commented Oct 25, 2023

Uh oh!

engcom-Hotel left a comment

Choose a reason for hiding this comment

Uh oh!

engcom-Hotel Oct 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

engcom-Echo commented Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

engcom-Echo commented Nov 2, 2023

Uh oh!

engcom-Echo commented Nov 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rostilos commented Nov 15, 2023

Uh oh!

engcom-Echo commented Dec 26, 2023

Uh oh!

engcom-Echo commented Jan 2, 2024

Uh oh!

engcom-Echo commented Jan 18, 2024

Uh oh!

Uh oh!

rostilos commented Jun 2, 2023 •

edited

Loading

rostilos commented Jul 10, 2023 •

edited

Loading

engcom-Hotel Oct 25, 2023 •

edited

Loading

engcom-Echo commented Oct 31, 2023 •

edited

Loading

engcom-Echo commented Nov 15, 2023 •

edited

Loading