[Security] Childless `EuiAccordion` Components On Roles > Kibana Privileges Flyout

[MichaelMarcialis]

The Kibana privileges flyout on the roles page in Stack Management houses all features in EuiAccordion components, regardless if they have children (i.e. sub-features) or not. This inadvertently hurts usability and accessibility for those accordions without children, giving them hover/focus styles indicating users can do something by interacting with the feature text (even though they can't). The fix would be to take those features without children out of accordion components.

Previously referenced here: https://github.com/elastic/kibana/pull/147709

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[legrego]

The Kibana privileges flyout on the roles page in Stack Management houses all features in EuiAccordion components, regardless if they have children (i.e. sub-features) or not.

I agree this isn't ideal. For posterity, it was done this way so that the items without sub-features would render exactly the same way as those with sub-features. I fear that building a different component that renders exactly like an accordion, but isn't one, would be quite brittle and inconsistent across browsers. I might be wrong! But that's my fear.

[MichaelMarcialis]

I agree this isn't ideal. For posterity, it was done this way so that the items without sub-features would render exactly the same way as those with sub-features. I fear that building a different component that renders exactly like an accordion, but isn't one, would be quite brittle and inconsistent across browsers. I might be wrong! But that's my fear.

Thanks, @legrego. I can see your point. However, considering that these accordions are so sparsely styled, I can't imagine this instance would be more complex than applying some padding/margining to an EUI text or title component. I also think the accessibility improvement would be worth the effort regardless. Thoughts?

[legrego]

I'm happy for us to give it a try, and see what it looks like

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)