Fix table sorting icon contrast to meet WCAG AA accessibility standards

[Copilot]

Problem

The sorting icons in table headers had insufficient contrast against the light header background, failing WCAG AA accessibility standards:

• Inactive icons: #8c939b (light gray) with 2.79:1 contrast ratio ❌
• Active icons: #378dd4 (light blue) with 3.19:1 contrast ratio ❌

WCAG AA standards require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text/graphics. While these are small icons, the contrast was too low even for the 3:1 threshold, making them difficult to see for users with visual impairments or in poor lighting conditions.

Solution

Updated the sorting icon colors in src/components/shared/Table.tsx to use darker, more accessible colors:

• Inactive icons: #5a5e63 (dark gray) → 5.87:1 contrast ratio ✅
• Active icons: #1d5888 (dark blue) → 6.73:1 contrast ratio ✅

Both colors now exceed WCAG AA standards with over 110% improvement in contrast ratios.

The active color #1d5888 was specifically chosen because it's already used for action links in the table styles (src/styles/components/_tables.scss), maintaining visual consistency throughout the application.

Changes

• Modified src/components/shared/Table.tsx (2 lines)
• Updated both LuChevronUp and LuChevronDown icon colors for active and inactive states

Screenshots

Default state with improved inactive icon contrast

Active sorting state with improved contrast

Benefits

• ✅ Meets WCAG AA accessibility standards
• ✅ Improved visibility for users with visual impairments
• ✅ Better user experience in various lighting conditions
• ✅ Maintains visual consistency with existing UI elements
• ✅ Minimal code change with no breaking changes

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• develop.opencast.org
  • Triggering command: node /home/REDACTED/work/opencast-admin-interface/opencast-admin-interface/node_modules/.bin/vite (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Too little contrast in table sorting</issue_title>
<issue_description>

The inactive icon in particular has a contrast ratio of 1.9:1, which is far too low. However, the active icon is also too low in contrast at 3.01:1 due to its size.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1270

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

Hi @Copilot
Thank you for contributing to the Opencast Admin UI.
We noticed that you have not yet filed an Individual Contributor License Agreement. Doing that (once) helps us to ensure that Opencast stays free for all. If you make your contribution on behalf of an institution, you might also want to file a Corporate Contributor License Agreement (giving you as individual contributor a bit more security as well). It can take a while for this bot to find out about new filings, so if you just filed one or both of the above do not worry about this message!
Please let us know if you have any questions regarding the CLA.

[github-actions]

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/opencast-admin-interface:pr-1448

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/opencast-admin-interface:pr-1448

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

[Arnei]

FYI this was created as part of a demonstration in the OC technical meeting.

[Arnei]

Also #1431 is addressing the same issue.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[Arnei]

Since it appears that nobody wants to use this as a base for their work, I'll go ahead and close this. It's easy enough to reopen or regenerate.