Inconsistency between popover-list & menu

[InnaAtanasova]

Bug reported by Dost Arora:

• A11Y: In Menu, the Accessibility dotted line appears when hovering over the element. In popover-list it appears after pressing tab. Is there any way to enable/disable this for Menu OR Popover ?
• CSS: In popover, the corner of first & last element bleeds out from the edges. This does not happen in Menu. .fd-menu__list - has additional box-shadow -box-shadow: var(--sapContent_Shadow1, 0 0 0 .0625rem rgba(0, 0, 0, .42), 0 .125rem .5rem 0 rgba(0, 0, 0, .3)) apart from the popover shadow which makes the menu border looks darker. .fd-menu__link - has unbalanced left & right padding - padding: .75rem 1rem .75rem .75rem. Items are not centered. .fd-menu__title - has font-size var(--sapFontSize, .875rem), whereas .fd-list__title has font-size var(--sapFontLargeSize, 1rem)

Demo: https://stackblitz.com/edit/tpp-issue-2-list-menu-da25?file=src/app/menu-example.component.html

[dostarora97]

Just to clarify the first point under CSS:

In popover, the corner of first & last element bleeds out from the edges. This does not happen in Menu.

This only happens when hovering over the first and last item.

I think the issue might be with the .fd-list__link class not having border-bottom-left-radius & border-bottom-right-radius property set

[InnaAtanasova]

https://github.com/SAP/fundamental-styles/issues/3173

[InnaAtanasova]

https://github.com/SAP/fundamental-styles/issues/3164

[InnaAtanasova]

https://github.com/SAP/fundamental-styles/issues/3195

[mikerodonnell89]

@dostarora97

Please correct me if I'm wrong but I believe most of these issues are isolated to the fundamental-ngx implementations of these components, specifically because of the hover/focus on menu item issue. I have opened a PR here on the fundamental-ngx repository to address the hover/focus as well as the double box-shadow when using menu in a popover. Note that the fundamental-styles examples for menu within a popover have the fd-menu__list--no-shadow class (this was missing from fundamental-ngx)

Regarding the issue with list items having the broken corners when hovered, we encourage you to instead use the menu component. List component is no longer intended to be used within a popover.

The uneven left/right padding on the menu link class is according to the designs.

The menu title and list title being different sizes is not an issue as the list is no longer intended to be used within the popover and these components shouldn't be considered interchangeable.

Let us know if you have any questions! Thanks

[platon-rov]

After the latest improvements only the first item of menu gets the focus styles. Then, when hovering over the items, they are getting hover styles, not focus. Focus styles applies to the items respectively when navigating over the menu items with keyboard. I think it makes sense.

https://user-images.githubusercontent.com/20265336/155976324-da04a3bc-a497-42c7-921a-4964e7e5b26c.mov

[dreamweiver]

@platon-rov , is this already available on v0.33.4 or yet to release?

based on this video, what happens when mouse hover is pointing at option1 and keyboard focus is pointing at option 2 and then I hit enter key on the keyboard ?

will option selection be triggered on option 2 based on keyboard focus ?

also will the focus or hover state get affected when options are loaded dynamically? because it does affect when running on v0.33.4, check below demo

dynamic menu options accessibility issue : https://stackblitz.com/edit/angular-jxbywy-pqxpjq?file=src%2Fapp%2Fmenu-with-submenu-example.component.html

[dostarora97]

Thanks for the update @mikerodonnell89 @platon-rov. We'll be using menu-component for most of our dropdowns.

1. As for the broken corner issue, there are some use cases where one might prefer to use list in popover, as it allows for much more flexibility. For example we have the following use-case, where we show multiple lists in a popover: tpp-multilist-popover-da25 Here, the first & last list-item have broken corners when hovered over. This might be fixable with following CSS fix in fundamental-ngx or fundamental-styles.

CSS Fix

.fd-list {
  .fd-list__item:first-of-type .fd-list__link:hover {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
  .fd-list__item:last-of-type .fd-list__link:hover {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
}

2. This also happens in menu, if <fd-menu> contains any child element other than [fd-menu-item], at first or last positions. Example 1: tpp-issue-3-menu-corners-da25 Example 2: tpp-recipe-1-dynamically-nested-menu-da25 I think, this might be fixable with following CSS fix fundamental-styles : https://github.com/SAP/fundamental-styles/compare/main...dostarora97:main

[mikerodonnell89]

@dostarora97 the fix on your branch related to tpp-issue-3-menu-corners-da25 does solve the issue of rounded corners if the last-child is a div of 0 height but I don't see when someone would build a menu like that - if the last-child is not a menu-item and it actually has some height, you get this (i've set the div height to 32px and background to red):

However with the issue tpp-recipe-1-dynamically-nested-menu-da25 I do think we will need to rework our approach to dynamically generated menus so I will look in to that and get back to you on this issue here