• Kyle Keating's avatar
    Fix <Menu> tab focus on keyboard navigation · 75ed100f
    Kyle Keating authored
    The Publish Annotation popup menu button was not showing a focus halo on keyboard navigation.  This was due to the child content of the button.menu__toggle having position:absolute elements and so that was not providing a width or height directly on the focusable button.
    
    Removing the absolute styling and instead using a flex layout remedies this, but there also needs to be a block display applied to the button.toggle_menu element so can be treated as a flex item, rather than flex container, with a height of 100% to match the size of its parent “.menu”.  In order to ensure everything still laid out the same, namely the {label} and {menuIndicator}, a pseudo flex container “.menu__toggle-wrapper” needed to be added.
    
    Additionally, the triangle content is moved from DOM to css so it is not read out by screen readers.
    75ed100f
annotation-publish-control.scss 2.59 KB