Skip to content

Ivanmartynau/sep 1837 accessibility improvement #27194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Ivanmartynau/sep 1837 accessibility improvement #27194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b246462
Improve a11y for ClusterHUD.jsx and PageTitle.jsx
ivanmartynau-oss Oct 23, 2025
28e7366
Improve a11y for ClusterHUD.jsx
ivanmartynau-oss Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions core/trino-web-ui/src/main/resources/webapp/src/components/ClusterHUD.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,50 +146,104 @@ export class ClusterHUD extends React.Component {
this.state.runningQueries,
$.extend({}, SPARKLINE_PROPERTIES, { chartRangeMin: 0 })
)
// Apply ARIA attributes to the generated canvas
$('#running-queries-sparkline canvas').attr({
'aria-label': `Running queries over time. Current value: ${this.state.runningQueries[this.state.runningQueries.length - 1]} queries`,
Comment on lines +150 to +151
Copy link

@sourcery-ai sourcery-ai bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Consider handling empty data arrays to avoid undefined values in ARIA labels.

Accessing the last element of an empty array returns 'undefined', which may be read incorrectly by screen readers. Use a default value like 0 when the array is empty.

'role': 'img',
'id': 'running-queries-chart'
})
Comment on lines +153 to +154
Copy link

@sourcery-ai sourcery-ai bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Using static IDs for multiple charts may cause DOM conflicts.

Using a static 'id' for each chart's canvas can result in duplicate IDs if multiple ClusterHUD instances are rendered. Use a unique ID per instance or remove the 'id' if it's not required.

$('#blocked-queries-sparkline').sparkline(
this.state.blockedQueries,
$.extend({}, SPARKLINE_PROPERTIES, { chartRangeMin: 0 })
)
// Apply ARIA attributes to the generated canvas
$('#blocked-queries-sparkline canvas').attr({
'aria-label': `Blocked queries over time. Current value: ${this.state.blockedQueries[this.state.blockedQueries.length - 1]} queries`,
'role': 'img',
'id': 'blocked-queries-chart'
})
$('#queued-queries-sparkline').sparkline(
this.state.queuedQueries,
$.extend({}, SPARKLINE_PROPERTIES, { chartRangeMin: 0 })
)
// Apply ARIA attributes to the generated canvas
$('#queued-queries-sparkline canvas').attr({
'aria-label': `Queued queries over time. Current value: ${this.state.queuedQueries[this.state.queuedQueries.length - 1]} queries`,
'role': 'img',
'id': 'queued-queries-chart'
})

$('#active-workers-sparkline').sparkline(
this.state.activeWorkers,
$.extend({}, SPARKLINE_PROPERTIES, { chartRangeMin: 0 })
)
// Apply ARIA attributes to the generated canvas
$('#active-workers-sparkline canvas').attr({
'aria-label': `Active workers over time. Current value: ${this.state.activeWorkers[this.state.activeWorkers.length - 1]} workers`,
'role': 'img',
'id': 'active-workers-chart'
})
$('#running-drivers-sparkline').sparkline(
this.state.runningDrivers,
$.extend({}, SPARKLINE_PROPERTIES, {
numberFormatter: precisionRound,
})
)
// Apply ARIA attributes to the generated canvas
$('#running-drivers-sparkline canvas').attr({
'aria-label': `Running drivers over time. Current value: ${formatCount(this.state.runningDrivers[this.state.runningDrivers.length - 1])} drivers`,
'role': 'img',
'id': 'running-drivers-chart'
})
$('#reserved-memory-sparkline').sparkline(
this.state.reservedMemory,
$.extend({}, SPARKLINE_PROPERTIES, {
numberFormatter: formatDataSizeBytes,
})
)
// Apply ARIA attributes to the generated canvas
$('#reserved-memory-sparkline canvas').attr({
'aria-label': `Reserved memory over time. Current value: ${formatDataSizeBytes(this.state.reservedMemory[this.state.reservedMemory.length - 1])}`,
'role': 'img',
'id': 'reserved-memory-chart'
})

$('#row-input-rate-sparkline').sparkline(
this.state.rowInputRate,
$.extend({}, SPARKLINE_PROPERTIES, {
numberFormatter: formatCount,
})
)
// Apply ARIA attributes to the generated canvas
$('#row-input-rate-sparkline canvas').attr({
'aria-label': `Row input rate over time. Current value: ${formatCount(this.state.rowInputRate[this.state.rowInputRate.length - 1])} rows per second`,
'role': 'img',
'id': 'row-input-rate-chart'
})
$('#byte-input-rate-sparkline').sparkline(
this.state.byteInputRate,
$.extend({}, SPARKLINE_PROPERTIES, {
numberFormatter: formatDataSizeBytes,
})
)
// Apply ARIA attributes to the generated canvas
$('#byte-input-rate-sparkline canvas').attr({
'aria-label': `Byte input rate over time. Current value: ${formatDataSizeBytes(this.state.byteInputRate[this.state.byteInputRate.length - 1])} per second`,
'role': 'img',
'id': 'byte-input-rate-chart'
})
$('#cpu-time-rate-sparkline').sparkline(
this.state.perWorkerCpuTimeRate,
$.extend({}, SPARKLINE_PROPERTIES, {
numberFormatter: precisionRound,
})
)
// Apply ARIA attributes to the generated canvas
$('#cpu-time-rate-sparkline canvas').attr({
'aria-label': `CPU time rate per worker over time. Current value: ${formatCount(this.state.perWorkerCpuTimeRate[this.state.perWorkerCpuTimeRate.length - 1])} CPU seconds per worker per second`,
'role': 'img',
'id': 'cpu-time-rate-chart'
})

this.setState({
lastRender: renderTimestamp,
Expand All @@ -211,6 +265,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Total number of queries currently running"
tabIndex="0"
aria-label="Running queries - Total number of queries currently running"
Comment on lines +268 to +269
Copy link

@sourcery-ai sourcery-ai bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: tabIndex="0" may affect keyboard navigation order.

Evaluate if each span should be focusable, as excessive use of tabIndex="0" can make keyboard navigation cumbersome. Limit focusable elements to those that require user interaction.

Suggested implementation:

                                    data-toggle="tooltip"
                                    data-placement="right"
                                    title="Total number of queries currently running"
                                    aria-label="Running queries - Total number of queries currently running"
                                    aria-describedby="running-queries-chart"
                                >
                                    data-toggle="tooltip"
                                    data-placement="right"
                                    title="Total number of active worker nodes"
                                    aria-label="Active workers - Total number of active worker nodes"
                                    aria-describedby="active-workers-chart"
                                >

aria-describedby="running-queries-chart"
>
Running queries
</span>
Expand All @@ -223,6 +280,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Total number of active worker nodes"
tabIndex="0"
aria-label="Active workers - Total number of active worker nodes"
aria-describedby="active-workers-chart"
>
Active workers
</span>
Expand All @@ -235,6 +295,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Moving average of input rows processed per second"
tabIndex="0"
aria-label="Rows per second - Moving average of input rows processed per second"
aria-describedby="row-input-rate-chart"
>
rows/s
</span>
Expand Down Expand Up @@ -283,6 +346,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Total number of queries currently queued and awaiting execution"
tabIndex="0"
aria-label="Queued queries - Total number of queries currently queued and awaiting execution"
aria-describedby="queued-queries-chart"
>
Queued queries
</span>
Expand All @@ -295,6 +361,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Moving average of total running drivers"
tabIndex="0"
aria-label="Runnable drivers - Moving average of total running drivers"
aria-describedby="running-drivers-chart"
>
Runnable drivers
</span>
Expand All @@ -307,6 +376,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Moving average of input bytes processed per second"
tabIndex="0"
aria-label="Bytes per second - Moving average of input bytes processed per second"
aria-describedby="byte-input-rate-chart"
>
bytes/s
</span>
Expand Down Expand Up @@ -353,6 +425,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Total number of queries currently blocked and unable to make progress"
tabIndex="0"
aria-label="Blocked Queries - Total number of queries currently blocked and unable to make progress"
aria-describedby="blocked-queries-chart"
>
Blocked Queries
</span>
Expand All @@ -365,6 +440,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Total amount of memory reserved by all running queries"
tabIndex="0"
aria-label="Reserved Memory - Total amount of memory reserved by all running queries"
aria-describedby="reserved-memory-chart"
>
Reserved Memory (B)
</span>
Expand All @@ -377,6 +455,9 @@ export class ClusterHUD extends React.Component {
data-toggle="tooltip"
data-placement="right"
title="Moving average of CPU time utilized per second per worker"
tabIndex="0"
aria-label="Worker Parallelism - Moving average of CPU time utilized per second per worker"
aria-describedby="cpu-time-rate-chart"
>
Worker Parallelism
</span>
Expand Down
4 changes: 2 additions & 2 deletions core/trino-web-ui/src/main/resources/webapp/src/components/PageTitle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ export class PageTitle extends React.Component<Props, State> {
<tbody>
<tr>
<td>
<a href="/ui/">
<img src="assets/logo.png" />
<a href="/ui/" aria-label="Home page">
<img alt="Starburst logo" src="assets/logo.png" />
</a>
</td>
<td>
Expand Down
Loading