Accessibility Issue: keyboard-only users cannot interact with "show more"

[hostle83]

Describe the bug Keyboard-only users cannot expand text that is hidden and needs to be expanded for full view. This issue applies to all instances where the "show more" functionality is used.

To Reproduce Steps to reproduce the behavior: Reproducible both in demo & sandbox. See image.

Expected behavior A keyboard-only user should be able to expand the text without needing a mouse to click on the text.

[autavares-dev]

The template for the expand and collapse buttons binds to the actualClick event, defined by the dsDragClick directive.

According to the code comments, this directive is for preventing drag events being misinterpret as clicks. Manually testing the page (on 7.6.x) without this directive and binding to the click event, the only way I was able to make a drag be interpreted as a click was to start and end the drag over the 'Show more'/'Collapse' text.

Keyboard navigation for buttons will trigger the click event when activating the button (not being used).

It's simple to fix the problem, I just don't know if there are good reasons to keep the dsDragClick directive and actualClick event.

The current code is:

  <button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
  ...

The options are:

• Alternative 1, keep the actualClick binding and add the event bindings for specific keys:

  <button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()"
  (keyup.Enter)="toggle()" (keyup.Space)="toggle()"
  >

• Alternative 2, change to click event and remove the dsDragClick directive:

  <button class="btn btn-link p-0 expandButton" (click)="toggle()">
  ...

[tdonohue]

@autavares-dev : Thanks for the analysis. I have to admit, I don't know this area of the code well, but I'm all in favor of simplification. If replacing the custom actualClick with click doesn't have any side effects in the behavior, then that seems reasonable to me. However, if we find side effects of that change, your "Alternative 1" seems like the better approach.

So, I don't have a strong preference, but we'd need to carefully test that switching to click doesn't cause side effects to the behavior of these "show more" buttons. (It's always possible though that the actualClick event was added to fix an issue that is no longer occurring...it looks like it was first introduced 6 years ago in #221, and we have upgraded Angular several times since then.)

If you'd like to claim this ticket and provide a PR, please let me know!

[autavares-dev]

I would like to claim the task.

It seems safer to me to use the first alternative, by including the space and enter keys. By this document, it is enough using those two keys.

It would be difficult to be sure that no unwanted side effects were added by manually testing/clicking the button occurrences.

[tdonohue]

Thanks @autavares-dev ! I've assigned the task to you. Please feel free to send along a PR whenever you are able to complete the task. See our contributing guidelines for more details as needed.