Where is the JS file located to change the aria-expanded=true in Magento 2

Question

I'm new to Magento 2.2... I need to output submenu under a top menu dropdown with three columns. The base Luma theme shows single column for dropdown menu. I have done the change in the code

/app/design/frontend/vendor_name/my_theme/Magento_Theme/templates/html/topmenu.phtml

 <?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?> to

 <?php $columnsLimit = $block->getColumnsLimit() ?: 6; ?>

Now the submenu is divided into 5 items(rows) per column.The dropdown is not displayed because the aria-expanded has not changed to true for third level nested <ul> whilst hovering the Parent menu. I have checked the menu.js and Topmenu.php file. I don't have an idea what to do?. Please anybody help me to fix this.

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <li class="level0 nav-1 first level-top parent ui-menu-item" role="presentation"><a href="http://example.com" class="level-top ui-corner-all" aria-haspopup="true" id="ui-id-4" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>ECE Projects</span></a>
            <ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="false" style="display: none; top: 47px; left: 0.28125px;" aria-hidden="true">
                <li class="column ui-menu-item" role="presentation">
                    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
                        <li class="level1 nav-1-1 first ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-8" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-2 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-9" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-3 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-10" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-4 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-11" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-5 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-12" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li></ul></li>
                <li class="column ui-menu-item" role="presentation">
                    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
                        <li class="level1 nav-1-6 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-13" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-7 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-14" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</a></li>
                        <li class="level1 nav-1-8 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-15" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-9 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-16" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-10 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-17" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                    </ul>
                </li>
                <li class="column ui-menu-item" role="presentation">
                    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
                        <li class="level1 nav-1-11 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-18" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-12 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-19" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-13 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-20" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-14 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-21" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-15 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-22" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        </ul>
                    </li>
            </ul>
        </li>
    </ul>
</nav>

How can I remove the aria-expanded attribute or change for the third level ul?

Thanks in advance.

Answer 1

Mage menu is coming from the jQuery Menu widget, which originates from http://code.jquery.com/ui/1.12.1/jquery-ui.js. There all attributes are set, and aria-expanded also.

It is the best not remove it. You can menage it by using standard jQuery .attr() method like $(element).attr("aria-expanded", "false"); or inspect the state of it like if ($(element).attr('aria-expanded') != 'true') {...}.

It is interesting that with this CSS, when you change an element’s aria-hidden attribute, you’re also changing the CSS display property.

The aria-hidden attribute is a way of providing precise instructions to the Assistive Technology device: when true, don’t display/speak the text; if false, display/speak the text. It can be used in combination with the CSS display property to ensure the same result in visual and non-visual environments.