[DataGrid] Improve accessibility of the sort icon

[arminmeh]

Closes #20189

Both, column header sort icon and the pivoting panel sort icons are updated.
I had to change the pivoting panel hover state background color to make it more highlighted. I think that this approach is better in general, because it makes the contrast larger if you hover exactly on the element. Currently, it is the opposite.

For non-text elements contrast ratio should be at least 3:1.

I have measured the sort icon color and background color contrast in various states and in both light and dark modes.

Mode	Before	After
Light
Dark

[mui-bot]

Deploy preview: https://deploy-preview-20430--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	🔺+489B(+0.12%)	🔺+68B(+0.06%)
@mui/x-data-grid-pro	🔺+489B(+0.10%)	🔺+69B(+0.05%)
@mui/x-data-grid-premium	🔺+489B(+0.08%)	🔺+64B(+0.03%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c7482c6

[kenanyusuf]

Although the contrast is undoubtably better, I don't think we should change the color of the icon when the sort is active — it should be consistent with the other icon buttons displayed in the column header, otherwise we get a mix of shades of grey which doesn't look nice:

We could just bump the opacity of the hover icon slightly to 0.75.

[arminmeh]

Although the contrast is undoubtably better, I don't think we should change the color of the icon when the sort is active — it should be consistent with the other icon buttons displayed in the column header, otherwise we get a mix of shades of grey which doesn't look nice:

We could just bump the opacity of the hover icon slightly to `0.75`.

@cherniavskii we didn't take this into account when we were discussing the issue.

I have reverted the color and increased the opacity.
0.78 is the lowest value that makes the check pass.

I can leave it like that or round it up to 0.8.

[kenanyusuf]

0.78 looks good 👍