fix(select): added pf-m-focus support for favorite __menu-items

[mcoker]

fixes #3429

This also adds :focus-within support in the app launcher to match the select, so that when you focus on an element in a favorite menu item, the whole item's background changes. This will change the current keyboard navigation style in the app launcher from:

to:

This makes the app launcher match the select, and the general style of navigating any of these types of menus by keyboard.

[patternfly-build]

Preview: https://patternfly-pr-3431.surge.sh

A11y report: https://patternfly-pr-3431-coverage.surge.sh

CSS Size Report

Name	Current	Previous	Diff %
components/Select/select.css	21.1 kB	20.9 kB	1.11
components/AppLauncher/app-launcher.css	11.9 kB	11.8 kB	0.47
patternfly.min.css	717.3 kB	717.1 kB	0.04
patternfly-no-reset.css	811.3 kB	811.0 kB	0.04
patternfly.css	813.2 kB	812.9 kB	0.04

[mcarrano]

This seems to make sense. @gdoyle1 can you also take a look to confirm that this works? Thanks.

[mcoker]

@nicolethoen @tlabaj this PR updates the CSS to work with the way the react component adds pf-m-focus to pf-c-select__menu-item. However, in the favorites select menu, the parent li.pf-c-select__menu-wrapper is what we style on :hover and :focus-within to create the grey background behind all of the actions in that item row. We don't apply that styling to the pf-c-select__menu-item element like other menus with a single action per item (when the item is the action).

If it's straight forward to do so, could we move the pf-m-focus class from pf-c-select__menu-items to the parent li.pf-c-select__menu-wrapper element in the react component when navigating by keyboard? If so, I'll need to update this PR. If it's not ideal to do that we can keep it the way it is now in this PR.

[nicolethoen]

@nicolethoen @tlabaj this PR updates the CSS to work with the way the react component adds pf-m-focus to pf-c-select__menu-item. However, in the favorites select menu, the parent li.pf-c-select__menu-wrapper is what we style on :hover and :focus-within to create the grey background behind all of the actions in that item row. We don't apply that styling to the pf-c-select__menu-item element like other menus with a single action per item (when the item is the action).

If it's straight forward to do so, could we move the pf-m-focus class from pf-c-select__menu-items to the parent li.pf-c-select__menu-wrapper element in the react component when navigating by keyboard? If so, I'll need to update this PR. If it's not ideal to do that we can keep it the way it is now in this PR.

This would take a little change on the react side I think, but it shouldn't be problematic.
We have so many pending react changes anyway... lol

[mattnolting]

LPTM 👍

[christiemolloy]

LGTM

[redallen]

🎉 This PR is included in version 4.35.3 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀