Color changes when mouse hover on disabled link component in table cell

[shizy818]

What package(s) are you using?

• carbon-components 10.39.0
• carbon-components-react 10.39.0

Detailed description

Describe in detail the issue you're having.

The behavior of disabled link component itself is as expected. However when I have a disabled link in table cell, the color changes when the mouse hovers on it. It is because of following css:

What did you expect to happen? What happened instead? What would you like to
see changed?

I expect disabled link in the table cell does not have this behavior. Any workaround now?

What browser are you working in?

Firefox

Steps to reproduce the issue

1. https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox
2. Paste following Code in index.js

import React from 'react';
import { render } from 'react-dom';
import { DataTable, Link, Table, TableContainer, 
  TableHead, TableHeader, TableRow, TableBody, TableCell } from 'carbon-components-react';

const headerData = [
  {
    header: 'Name',
    key: 'name',
  },
];
const rowData = [
  {
    id: 'a',
    name: 'Load Balancer 3',
  },
  {
    id: 'b',
    name: 'Load Balancer 1',
  },
];
const App = () => (
  <DataTable rows={rowData} headers={headerData}>
  {({ rows, headers, getHeaderProps, getTableProps }) => (
    <TableContainer title="DataTable">
      <Table {...getTableProps()}>
        <TableHead>
          <TableRow>
            {headers.map((header) => (
              <TableHeader {...getHeaderProps({ header })}>
                {header.header}
              </TableHeader>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              {row.cells.map((cell) => (
                <TableCell key={cell.id}>
                  <Link href="#" disabled>{cell.value}</Link>
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )}
</DataTable>
);

render(<App />, document.getElementById('root'));

Additional information

• Screenshots or code
• Notes