PeoplePicker: Styling and accessibility issues

[kristoferbrown]

Describe the issue:

• Persona pills should have a minimum and maximum width instead of being set to 180px.
• Text in persona pills should be vertically centered instead of having conflicting padding-top values.
• X buttons in persona pills shouldn't be a tab stop.
• Suggestions panel should not overlap the input well.

[dzearing]

Suggestion is for pills, only use Persona for the images. Style the text correctly in the pill. Make sure it's vertically centered, not baseline aligned with the X button.

Also a couple of other bugs:

• padding between the pills seems like it should be a little wider
• I'm noticing a lot of flicker with the personas in the suggestions. This seems like a bug.
• I'm noticing that sometimes when removing a pill, (say you add 5, then arrow to Adds example of primary button with icon #2, then press delete), the Personas are refreshing. That's because the pills don't have reasonable ids as keys; they're using indexes, I believe. We need to make it so that there is very little re-rendering in this scenario.
• The FocusZone should be bidirectional
• The FocusZone should "wrap" (arrow right from the right-most pill should to to the left-most pill on the next row.)

[betrue-final-final]

Do you have a link to the redlines?

[kristoferbrown]

@dzearing, seems like a lot of the persona pill issues would be cleaned up by scrapping all of the old specific padding rules on each detail row in each different size with a single flex box. Seems like just disabling the padding rules and setting flex-direction: column on Persona_details gets us 90% of the way there.