Bug - [Switch] - [Doesn't support popover]

[Misjohns]

If a popover is required for a switch element the question-circle icon doesn't wrap along with the switch label. When the label changes from a short label to a long label the question-circle icon can appear far away from the switch element.

The question-circle icon should appear roughly 8px from the last character in the label.

This is how it currently appears when user reduces their screen width:

We are using this in RHTAP for Summit

[christianvogt]

The actual dev implementation in the screenshot above is:

<Switch ... /><HelpPopover .../>

I think we can put the ? button within the switch label and it would function.

[mcoker]

@christianvogt while it's valid HTML, I'm not sure if that presents any sort of a11y issue. @thatblindgeye or @jessiehuff do you know if that would be an issue? I know we have a button in a label in checkbox tree view nodes, and I can't remember if this was discussed then or not - https://www.patternfly.org/v4/components/tree-view#with-checkboxes

[thatblindgeye]

@mcoker @christianvogt in terms of putting the help popover inside the Switch label (and/or labelOff) prop is that the text label has aria-hidden="true" applied. So while you can Tab to the popover, using something like VoiceOver's navigation methods you wouldn't be able to navigate to the popover (and would have no idea there is a help popover on the page).

[andrew-ronaldson]

Hey @Misjohns
We talked about in a PatternFly meeting and thought this may be another option for this issue. Would either of these options work for your use case? My text here can be finessed by Content designers 😉

[Misjohns]

@andrew-ronaldson Having the ? beside a label that sits above the switch or check box resolves the accessibility concern. I'm worried that it adds more text/noise to the screen. In some cases, the additional label could provide helpful context but for other cases, the label would be very redundant with the switch/check box text (as in your example). Maybe we need to document that this pattern would only be required when a popover is needed vs. every instance of a check box or switch.