fix(VListItem): respect link & canvas colors in forced-colors mode

[06b]

Description

This relates to the request for High Contrast Support #21515.

When forced-colors is active (such as High Contrast Mode in Windows), in Vuetify 3.9.6 it would render VListItem that is a link with the expected system color for the hyperlink.

However, due to #21958 in Vuetify 3.9.7 the VListItem renders the incorrect expected system colors for a VListItem that is a link or has no action assigned to it as the button system color.

For example, Content Filtering has no action assigned & Password is a link in the screenshots shown.

This pull request corrects this mistake when in forced-colors mode.

Markup:

<template>

  <v-card class="mx-auto" max-width="400">
    <v-toolbar color="purple">
      <v-btn icon="mdi-menu" />
      <v-toolbar-title>Settings</v-toolbar-title>
      <v-btn icon="mdi-magnify" />
    </v-toolbar>

    <v-list lines="three">
      <v-list-subheader>User Controls</v-list-subheader>
      <v-list-item
        v-for="item in userControls"
        :key="item.value"
        :href="item.href"
        :subtitle="item.subtitle"
        :title="item.title"
      >
        <template #prepend>
          <v-avatar>
            <v-icon :icon="item.icon" />
          </v-avatar>
        </template>
      </v-list-item>
    </v-list>

    <v-divider />

    <v-list
      v-model:selected="settingsSelection"
      lines="three"
      select-strategy="leaf"
    >
      <v-list-subheader>General</v-list-subheader>
      <v-list-item
        v-for="item in settingsItems"
        :key="item.value"
        :subtitle="item.subtitle"
        :title="item.title"
        :value="item.value"
      >
        <template #prepend="{ isSelected, select }">
          <v-list-item-action start>
            <v-checkbox-btn
              :model-value="isSelected"
              @update:model-value="select"
            />
          </v-list-item-action>
        </template>
      </v-list-item>
    </v-list>
  </v-card>

</template>

<script>
  export default {
    data: () => ({
      userControls: [
        { title: 'Content filtering', subtitle: 'Set the content filtering level to restrict appts that can be downloaded', icon: 'mdi-filter' },
        { title: 'Password', subtitle: 'Require password for purchase or use password to restrict purchase', icon: 'mdi-form-textbox-password', href: 'https://example.com' },
      ],

      settingsItems: [
        { value: 'notifications', title: 'Notifications', subtitle: 'Notify me about updates to apps or games that I downloaded' },
        { value: 'sound', title: 'Sound', subtitle: 'Auto-update apps at any time. Data charges may apply' },
        { value: 'widgets', title: 'Auto-add widgets', subtitle: 'Automatically add home screen widgets when downloads complete' },
      ],

      settingsSelection: [],
    }),
  }
</script>

[06b]

@J-Sek do you mind giving this a review?

[J-Sek]

I was looking at the example markup from the description with a small change to use to instead of href and have one of the links / (matching current page). The icon was still yellow instead of cyan. It can be fixed by adding .v-icon to this list.

BTW. Do you remember how I could further adjust the demo to verify those other classes are needed here? Just want to verify those are necessary, as they stand out a bit.