fix: escape data-key values for querySelector compatibility

[tzwm]

What does this PR do?

Fix #7408 #7670

Fixes a critical syntax error in the List component when using querySelector with data-key attributes containing special characters, spaces, quotes, or non-ASCII characters (like Chinese). The issue occurred because raw key values were being inserted directly into CSS selector strings without proper escaping.

How did you verify your code works?

1. Added comprehensive unit tests: Created list.test.tsx with test cases covering:
   • File names with spaces
   • File names with single quotes
   • File names with special symbols (#, @, $, ^, &)
   • Non-ASCII Chinese file names
2. Manual testing: Verified component functionality with various edge case key values
3. Type safety: Ensured TypeScript compatibility with CSS.escape() usage
4. Regression testing: Confirmed existing List component behavior remains unchanged

[github-actions]

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

1. Open an issue describing the bug/feature (if one doesn't exist)
2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

[github-actions]

The following comment was made by an LLM, it may be inaccurate:

No duplicate PRs found

[tzwm]

found duplicated: #7757