[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

• 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

[kgogov]

Hi @wilson-xu-sap,

This issue has been resolved with #10272.

Thank you for bringing this to our attention!
If you encounter any further issues or have additional feedback, feel free to reach out.

Best regards,
Konstantin

[wilson-xu-sap]

Hi @wilson-xu-sap,

This issue has been resolved with #10272.

Thank you for bringing this to our attention! If you encounter any further issues or have additional feedback, feel free to reach out.

Best regards, Konstantin

Glad to hear that, thanks!

[ui5-webcomponents-bot]

🎉 This issue has been resolved in version v1.24.14 🎉

The release is available on v1.24.14

Your semantic-release bot 📦🚀