Truncate default state is not accessible to keyboard users

[khiga8]

Currently the Truncate component defaults to a span.

span elements cannot be keyboard-focused. Keyboard users will not be able to reach this element to expand it.

[lesliecdubs]

Thanks for filing!

Looking at the stories for Truncate it seems like switching from a span to an interactive element wouldn't necessarily make sense semantically. @khiga8 is adding a tabindex attribute bad practice in this case, or is there a better way to resolve this?

[khiga8]

Hi @lesliecdubs,

With tooltip, I've asked a similar question around whether we can set tabindex to make a span element focusable to allow setting a tooltip. The conclusion was no, settingtabindex to make something focusable would not be appropriate ecause the element itself is still a generic element -- it does not have a role that would imply that behavior is attached.

I think the same applies here for Truncate. Maybe beyond this Truncate example not being keyboard accessible, we need to evaluate whether there are valid uses for this component. There's a PR in progress (primer/design#325) which discusses options for truncations!

cc: @alexislucio who was involved in those convos and might have thoughts.

[lesliecdubs]

Thanks for teaching me about the best practice on this @khiga8!

@alexislucio interested to hear your thoughts on this when you have a minute. It looks like there are at least 26 unique files in github/github that utilize Truncate, so if the outcome is that we may want to deprecate this component there will be some work to do to ensure we don't break any UI with is removal.

If no changes are needed there, I'd be interested to know what you'd recommend changing the span element to in order to make the Truncate example in Lookbook compliant with receiving keyboard focus.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[khiga8]

not stale.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.