fix: improve ListItem accessibility for title and description

[danieledument]

Motivation

The current implementation of ListItem doesn't properly handle React components passed as title/description props in terms of accessibility. The title and description should be grouped for screen readers and other assistive technologies.

Related issue

This PR improves accessibility handling in ListItem components by ensuring that React components passed as title and description props maintain their accessibility relation to each other through grouping. This is particularly important for screen readers and other assistive technologies.

Test plan

1. Tested by passing React components as title and description props to ListItem
2. Verified that the components maintain their accessibility properties
3. Updated and verified snapshots for:
   • ListItem
   • ListAccordion
   • ListSection

All tests are passing, including the updated snapshot tests.

Example usage:
Same as before.

[callstack-bot]

Hey @danieledument, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[danieledument]

@BogiKay I've realized that perhaps this addition is not what we'd want from an accessibility perspective. My issue was that the text rendered in renderTitle() and renderDescription(), was read as "disabled" by the screen reader due to the selectable: false property. Wrapping them in the accessible={true} property removed this readout.

It makes no sense to me that a screen reader would interpret a text component as non-selectable when that's how it is in most cases. Instead it should opt to tell the user that it is selectable whenever that's the case. I think this PR should probably be closed. Sorry if I wasted your time.