Empty container in right sidebar of some pages

[amgolden]

An issue is occurring in the right sidebar of pages when an item in the sidebar menu is a parent of other pages, but those pages are not shown in the menu. The issue can be observed on these 2 pages of the Accessible Technology website:

• Accessible Technology Webinar Series
• UW Global Accessibility Awareness Day

The above pages are both parents but their children are hidden from the menu.

Both are <li> elements that contain an empty <ul class=”children”>. An empty list (i.e., a list with no list items) can be confusing for screen reader users. It's ok if the empty list is hidden, as it is on most pages, but on the two pages in question, the page with the empty list is also the current page, which results in the empty list being exposed via CSS. When the pages in question are not the current page, the empty lists are hidden using “display:none” because of this rule in CSS:

ul.uw-mobile-menu > div ul li.current_page_item li.page_item_has_children ul, ul.uw-mobile-menu > div ul li.current_page_parent li.page_item_has_children ul, ul.uw-mobile-menu li.pagenav ul li.current_page_item li.page_item_has_children ul, ul.uw-mobile-menu li.pagenav ul li.current_page_parent li.page_item_has_children ul, ul.uw-sidebar-menu > div ul li.current_page_item li.page_item_has_children ul, ul.uw-sidebar-menu > div ul li.current_page_parent li.page_item_has_children ul, ul.uw-sidebar-menu li.pagenav ul li.current_page_item li.page_item_has_children ul, ul.uw-sidebar-menu li.pagenav ul li.current_page_parent li.page_item_has_children ul {
   display: none;
} 

Whenever either of those pages is the “current” page, the above CSS is overridden by another rule, resulting in the empty <ul class=”children”> being exposed with “display:block.” This rule in CSS makes that happen:

ul.uw-mobile-menu > div ul li.current_page_item li.page_item_has_children.current_page_item ul, ul.uw-mobile-menu > div ul li.current_page_parent li.page_item_has_children.current_page_item ul, ul.uw-mobile-menu li.pagenav ul li.current_page_item li.page_item_has_children.current_page_item ul, ul.uw-mobile-menu li.pagenav ul li.current_page_parent li.page_item_has_children.current_page_item ul, ul.uw-sidebar-menu > div ul li.current_page_item li.page_item_has_children.current_page_item ul, ul.uw-sidebar-menu > div ul li.current_page_parent li.page_item_has_children.current_page_item ul, ul.uw-sidebar-menu li.pagenav ul li.current_page_item li.page_item_has_children.current_page_item ul, ul.uw-sidebar-menu li.pagenav ul li.current_page_parent li.page_item_has_children.current_page_item ul {
display: block;
}

2 possible solutions:

1. Fix the above CSS so the empty list is not exposed in the scenario described above.
2. If a parent has no visible children, don’t add <ul class=”children”> to the DOM.

[lcaple]

Hi Anna Marie, that site is actually on the newer theme located over here: https://github.com/uweb/uw_wp_theme

Can you repost this bug report over there for us so we can track it?

Thank you!

[amgolden]

Apologies! I have reposted the issue to the newer theme.