Fix: Add accessible titles to comparison table icons

[huangkevin-apr]

Fixes: #1984

Changes:

Solution

Added descriptive title props to all <Tick> and <Cross> components in the comparison table:

• <Tick title="Supported" /> - Clearly indicates the feature is supported in APISIX
• <Cross title="Not supported" /> - Clearly indicates the feature is not supported in other API gateways

Changes Made

Files Modified:

• website/src/components/sections/Comparison.tsx

Detailed Changes:

1. Dubbo, MQTT, Tengine and REST API to gRPC transcoding

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

2. Configuration rollback

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

3. Custom Load Balancing and routing

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

4. Plugin hot loading

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

5. Dashboard

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

6. Support any NGINX variable as routing condition

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

Screenshots of the change:

Fix Before

Fix After

Additional Info

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications.
The generated fixes were manually reviewed and validated before submission.