Inconsistency between popover-list & menu

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

[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

[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