More flexible KCard click event handling

[MisRob]

Description

KCard is updated for more flexible click event handling. Previously, its title text was always router-link, to prop was required, and the card would navigate to the target on click. The new behavior is:

• click event is always emitted on card click
• to prop is not required
• when to is provided, the title text is router-link, and the card navigates to the target
• when to is not provided, the title text is span, and the card doesn't navigate anywhere

Contains related a11y changes that increase screen reader reliability overall:

• Make title prop required and allow title customization via a scoped slot
• Ensure reliable screen readers announcements no matter whether card is link or no, and no matter whether the title is customized via the title slot.

Issue addressed

A new use-case in Studio that @akolson works on in learningequality/studio#4803 where a side panel needs to be toggled on card click without navigating to a new URL.

Changelog

• Description: Make the title prop required

• Products impact: updated API

• Addresses: A new use-case in Studio in Implement recommendations display studio#4803 where a side panel needs to be toggled on card click without changing URL.

• Components: KCard

• Breaking: yes

• Impacts a11y: no

• Guidance: Even if you use the title slot, pass the title text via the title prop.

• Description: Change the title slot into a scoped slot

• Products impact: updated API

• Addresses: A new use-case in Studio in Implement recommendations display studio#4803 where a side panel needs to be toggled on card click without changing URL.

• Components: KCard

• Breaking: no

• Impacts a11y: no

• Guidance: Consider using the slot's textTitle attribute to achieve more intuitive code when customizing the title.

• Description: Emit click event when card is clicked.

• Products impact: updated API

• Addresses: A new use-case in Studio in Implement recommendations display studio#4803 where a side panel needs to be toggled on card click without changing URL.

• Components: KCard

• Breaking: no

• Impacts a11y: no

• Guidance: -

• Description: Make to prop optional and when not provided, do not render the title text as router-link but rather as span.

• Products impact: updated API

• Addresses: A new use-case in Studio in Implement recommendations display studio#4803 where a side panel needs to be toggled on card click without changing URL.

• Components: KCard

• Breaking: no

• Impacts a11y: no

• Guidance: -

• Description: Ensure reliable screen readers announcements no matter whether card is link or no, and no matter whether the title is customized via the title slot

• Products impact: bugfix

• Addresses: A new use-case in Studio in Implement recommendations display studio#4803 where a side panel needs to be toggled on card click without changing URL.

• Components: KCard

• Breaking: no

• Impacts a11y: yes

• Guidance: -

Steps to test

• You could run the devserver, play around with to and @click on the DocsKCard and preview live example on KCard docs page.
• Is the updated documentation section clear?
• Can you see any functional, markup, or a11y regressions?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[AllanOXDi]

Looks good to me !Thanks Misha, maybe @akolson and @AlexVelezLl has something to say

[AlexVelezLl]

Hi @MisRob! I just noted a couple of things I would like to discuss about :)

[MisRob]

Thanks @AllanOXDi @AlexVelezLl, all feedback is resolved, changelog and PR description updated with new information. I tested screenreaders in all modes. As soon as we have some working features in Kolibri, we will loop in Radina for final confirmation (outside this PR though I'd suggest because there's way more a11y we'll be testing in the final products)

[MisRob]

In the new docs example, please ignore the thumbnail overflow issue - I shoud have this fixed in another branch

[AlexVelezLl]

Thank you @MisRob! Looks good to me!