No Code Attached Yet
avatar brianteeman
brianteeman
10 Jun 2021

My pr #34465 was merged too quickly as its not correct.

The home dashboard link is now always styled as active and has aria-current=page

You can't have two different links marked as current ;)

avatar brianteeman brianteeman - open - 10 Jun 2021
avatar joomla-cms-bot joomla-cms-bot - change - 10 Jun 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 10 Jun 2021
avatar PhilETaylor
PhilETaylor - comment - 10 Jun 2021

probably a quick fix for @dgrammatiko in the JS file you changed. https://github.com/joomla/joomla-cms/pull/34465/files

avatar dgrammatiko
dgrammatiko - comment - 10 Jun 2021
  // Sidebar Nav
  const allLinks = [].slice.call(wrapper.querySelectorAll('a.no-dropdown, a.collapse-arrow, .menu-dashboard > a'));
  const currentUrl = window.location.href;
  const mainNav = document.querySelector('ul.main-nav');
  const menuParents = [].slice.call(mainNav.querySelectorAll('li.parent > a'));
  const subMenusClose = [].slice.call(mainNav.querySelectorAll('li.parent .close'));

  const activeState = (element, state) => {
    if (state) {
      element.removeAttribute('aria-current');
      element.classList.remove('mm-active');

      // Close Expanded Levels
      if (!element.parentNode.classList.contains('parent')) {
        const firstLevel = element.closest('.collapse-level-1');
        const secondLevel = element.closest('.collapse-level-2');
        if (firstLevel) firstLevel.parentNode.classList.remove('mm-active');
        if (firstLevel) firstLevel.classList.remove('mm-show');
        if (secondLevel) secondLevel.parentNode.classList.remove('mm-active');
        if (secondLevel) secondLevel.classList.remove('mm-show');
      }
    } else if (currentUrl.indexOf(element.href) === 0) {
      element.setAttribute('aria-current', 'page');
      element.classList.add('mm-active');

      // Auto Expand Levels
      if (!element.parentNode.classList.contains('parent')) {
        const firstLevel = element.closest('.collapse-level-1');
        const secondLevel = element.closest('.collapse-level-2');
        if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
        if (firstLevel) firstLevel.classList.add('mm-show');
        if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
        if (secondLevel) secondLevel.classList.add('mm-show');
      }
    }
  };

  // Unset active menus
  allLinks.map((el) => activeState(el, true));

  // Set active class
  allLinks.map((el) => activeState(el));

Not tested but should do the trick

avatar angieradtke
angieradtke - comment - 14 Jul 2021
	if (currentUrl.indexOf(link.href) === 0) {
//	-> remove here  link.setAttribute('aria-current', 'page');
		link.classList.add('mm-active'); // Auto Expand Levels



		if (!link.parentNode.classList.contains('parent')) {
			const firstLevel = link.closest('.collapse-level-1');
			const secondLevel = link.closest('.collapse-level-2');
			if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
			if (firstLevel) firstLevel.classList.add('mm-show');
			if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
			if (secondLevel) secondLevel.classList.add('mm-show');
		}
	}

// add after

	if (currentUrl==link.href) {

		link.setAttribute('aria-current', 'page');

	}
avatar PhilETaylor
PhilETaylor - comment - 22 Aug 2021

simple one line PR #35294

avatar PhilETaylor
PhilETaylor - comment - 22 Aug 2021

@angieradtke your suggestion doesnt effect the highlight as that is done by mm-active and not aria-current

avatar PhilETaylor
PhilETaylor - comment - 22 Aug 2021

@dgrammatiko your suggested code did not fix the problem, the Home Dashboard still was highlighted on all pages.

avatar richard67 richard67 - close - 22 Aug 2021
avatar richard67
richard67 - comment - 22 Aug 2021

Closing as having a pull request. Please test #35294 . Thanks in advance.

avatar richard67 richard67 - change - 22 Aug 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-08-22 15:02:30
Closed_By richard67
Labels Added: No Code Attached Yet
Removed: ?

Add a Comment

Login with GitHub to post a comment