Wrap EuiHorizontalStep titles instead of truncating them.

[cjcenizal]

I think we can handle variable-length text more gracefully by wrapping it instead of truncating it. This way the text is still legible and the UI remains usable. As consumers we'll have to be careful about choosing copy which isn't unreasonably long.

[cchaos]

Yeah I guess you're right... ;)

Though there is still an issue with the disabled version allowing selection and tabbing.

[cchaos]

All that's needed here is display: flex and I'm not sure I remember why the flex-grow or flex-basis was added to this high level, but I think you can remove it here now that it's display: flex.

[cjcenizal]

@cchaos I was pondering the question of whether disabled elements should be focusable/tabbable and came upon this discussion which clarified things for me: https://ux.stackexchange.com/questions/103239/should-disabled-elements-be-focusable-for-accessibility-purposes?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa. Basically, if an element is disabled but visible then it also needs to be focusable -- if it's only visible but not focusable then sighted users can easily find it but people using screen readers will often never discover it. So the conclusion is to always make disabled elements tabbable and focusable. WDYT of using this as a general accessibility rule of thumb?

I agree that we should block the click on that disabled step though. Good catch. I'll also look into the flex thing, I think there may be a reason for those styles. If there is then I'll add a comment, otherwise I'll remove them. Thanks for the review!

[cchaos]

I can somewhat understand that. The one concern then is that browsers treat buttons that are :disabled as though they are not focusable. To me, I'd rather stick to how browser's have been supporting this property as, I would think, users are used to this behavior and it's a known paradigm.

[cjcenizal]

That's a good point, it would be more consistent so it's probably the safer choice. I'll change the disabled step so it can't receive focus. @aphelionz Can you provide some guidance here in the meantime?

[cjcenizal]

@cchaos I addressed your feedback, could you take another look?

[cchaos]

Thanks! LGTM