[Bug][SF][1.29.0][List][A11y][Expected Fixed Time: ASAP] The status violates the contrast demand when hovering on the list in high contrast mode

[wilson-xu-sap]

Describe the bug

The status violates the contrast demand when hovering on the list in HCB mode.

code example

import React, { useCallback, useMemo } from 'react';

import { List, StandardListItem } from '@ui5/webcomponents-react';
function App() {
  const data = [
    {
      id: 1,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 2,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 3,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 4,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 5,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 6,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 7,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 8,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 9,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 10,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 11,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 1,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 2,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 3,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 4,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 5,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 6,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 7,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 8,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 9,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 10,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 11,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 1,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 2,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
    {
      id: 3,
      link: 'www.google.com',
      name: 'Notebook Basic',
      price: '956EUR',
      dimension: '30 x 18 x 3cm',
    },
  ];
  return (
    <>
      <List growing="None" headerText="List with ListItemStandard">
        {data.map((x) => {
          return (
            <StandardListItem
              additionalText="www"
              additionalTextState="Warning"
            ></StandardListItem>
          );
        })}
      </List>
    </>
  );
}

export default App;

Isolated Example

https://stackblitz.com/edit/github-xbtmwe-zgqwey?file=src%2FApp.tsx,src%2Fmain.tsx,node_modules%2F%40ui5%2Fwebcomponents-react%2Fdist%2Fcomponents%2FThemeProvider%2Findex.d.ts

Reproduction steps

1. use HCB mode
2. hover on the list item
3. use CCA to test.

Expected Behaviour

No violation

Screenshots or Videos

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SF

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[wilson-xu-sap]

BTW, if we use object status on custom list item, it shares the same issue.

[wilson-xu-sap]

BTW, if we use object status on custom list item, it shares the same issue.

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[IlianaB]

Hello @ui5-webcomponents-topic-p I am forwarding this issue to you, because the contrast ration between the color of the additionalText in warning state and the color of the background of the list item when hovering in HCB mode is violated. Maybe this should also be discussed with design team.

Regards, Iliana