?
avatar brianteeman
brianteeman
4 Feb 2020

Steps to reproduce the issue

The toogle toolbar button is not hidden on the desktop view and is focussable (can be clicked on)

To make it easier to see add the following code to the template.css

navbar-toggler {
    background: red;
}


Expected result

nothing happens

Actual result

clickable red box
after

Additional comments

This is because at desktop resolutions the css for the toggler is

.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
}

This makes it contents visually invisible but not hidden from the page and important not removed from the accessibility tree unlike the burger menu icon for toggling the menu on mobile

Burger button (desktop resolution)

image

Toolbar button (desktop resolution)

image

avatar brianteeman brianteeman - open - 4 Feb 2020
avatar joomla-cms-bot joomla-cms-bot - change - 4 Feb 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 4 Feb 2020
avatar brianteeman
brianteeman - comment - 4 Feb 2020

This is probably caused by the changes made in #27705

avatar brianteeman brianteeman - change - 4 Feb 2020
Title
[4.0] burger button visible on desktop
[4.0] mobile button visible on desktop
avatar brianteeman brianteeman - edited - 4 Feb 2020
avatar brianteeman brianteeman - change - 4 Feb 2020
The description was changed
avatar brianteeman brianteeman - edited - 4 Feb 2020
avatar ravisaxena23
ravisaxena23 - comment - 5 Feb 2020

i guess CSS is same as written in navbar-toggler button but i will look into it. what can be done to correct it? i feel collapse class is not working for gear button or break point not working.?

avatar infograf768
infograf768 - comment - 5 Feb 2020

What if we re-add the class toggler-burger for the button line 152 of index.php ?

<button class="navbar-toggler toggler-toolbar collapsed" type="button" data-toggle="collapse" data-target=".subhead" aria-controls="subhead" aria-expanded="false" aria-label="<?php echo Text::_('TPL_ATUM_TOOLBAR'); ?>">
 				<span class="toggler-toolbar-icon"></span>
 			</button>
avatar ravisaxena23
ravisaxena23 - comment - 5 Feb 2020

@infograf768 @brianteeman please check

avatar brianteeman brianteeman - change - 5 Feb 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-02-05 18:08:22
Closed_By brianteeman
avatar brianteeman brianteeman - close - 5 Feb 2020
avatar brianteeman
brianteeman - comment - 5 Feb 2020

Closing as we have a pr for testing #27818

Add a Comment

Login with GitHub to post a comment