Skip to content

Commit 718e60a

Browse files
durable-workflow-opsdurable-workflow-ops
committed
Announce run-detail load and section state to assistive tech
Two Waterline run-detail accessibility improvements: - Add aria-expanded="true" and aria-controls to the fifteen section collapse toggles so screen readers can announce the show/hide relationship between each header toggle and its card body. Each section starts expanded (collapse show), so the initial value is "true" and Bootstrap 4 toggles it from there. - Announce the flow load state to assistive tech: the loading wrapper now uses role="status", aria-live="polite", and aria-busy="true" with an aria-hidden spinner; the error wrapper uses role="alert" and aria-live="assertive" so the failure message is announced to screen readers when the flow preview cannot be loaded. These bring the run-detail page in line with the patterns already used by the flow list and the worker/schedule cards.
1 parent d90050f commit 718e60a

1 file changed

Lines changed: 38 additions & 18 deletions

File tree

‎resources/js/screens/flows/flow.vue‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,19 @@
5656
Archive
5757
</button>
5858

59-
<a data-toggle="collapse" href="#collapseDetails" role="button">
59+
<a data-toggle="collapse" href="#collapseDetails" role="button"
60+
aria-expanded="true" aria-controls="collapseDetails">
6061
Collapse
6162
</a>
6263
</div>
6364
</div>
6465

6566
<div v-if="!ready && !loadingError"
66-
class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius">
67-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin mr-2 fill-text-color">
67+
class="d-flex align-items-center justify-content-center card-bg-secondary p-5 bottom-radius"
68+
role="status"
69+
aria-live="polite"
70+
aria-busy="true">
71+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon spin mr-2 fill-text-color" aria-hidden="true">
6872
<path
6973
d="M12 10a2 2 0 0 1-3.41 1.41A2 2 0 0 1 10 8V0a9.97 9.97 0 0 1 10 10h-8zm7.9 1.41A10 10 0 1 1 8.59.1v2.03a8 8 0 1 0 9.29 9.29h2.02zm-4.07 0a6 6 0 1 1-7.25-7.25v2.1a3.99 3.99 0 0 0-1.4 6.57 4 4 0 0 0 6.56-1.42h2.1z">
7074
</path>
@@ -74,7 +78,9 @@
7478
</div>
7579

7680
<div v-if="!ready && loadingError"
77-
class="d-flex flex-column align-items-center justify-content-center text-center card-bg-secondary p-5 bottom-radius">
81+
class="d-flex flex-column align-items-center justify-content-center text-center card-bg-secondary p-5 bottom-radius"
82+
role="alert"
83+
aria-live="assertive">
7884
<strong>Flow preview unavailable</strong>
7985
<span class="text-muted mt-2">{{ loadingError }}</span>
8086
<button class="btn btn-outline-primary btn-sm mt-3" @click="retryFlowLoad">
@@ -486,7 +492,8 @@
486492
<div class="card-header d-flex align-items-center justify-content-between">
487493
<h5>Arguments</h5>
488494

489-
<a data-toggle="collapse" href="#collapseArguments" role="button">
495+
<a data-toggle="collapse" href="#collapseArguments" role="button"
496+
aria-expanded="true" aria-controls="collapseArguments">
490497
Collapse
491498
</a>
492499
</div>
@@ -500,7 +507,8 @@
500507
<div class="card-header d-flex align-items-center justify-content-between">
501508
<h5>Output</h5>
502509

503-
<a data-toggle="collapse" href="#collapseOutput" role="button">
510+
<a data-toggle="collapse" href="#collapseOutput" role="button"
511+
aria-expanded="true" aria-controls="collapseOutput">
504512
Collapse
505513
</a>
506514
</div>
@@ -517,7 +525,8 @@
517525
<span class="small ml-2">{{ diagnosticsSummary() }}</span>
518526
</div>
519527

520-
<a data-toggle="collapse" href="#collapseRunDiagnostics" role="button">
528+
<a data-toggle="collapse" href="#collapseRunDiagnostics" role="button"
529+
aria-expanded="true" aria-controls="collapseRunDiagnostics">
521530
Collapse
522531
</a>
523532
</div>
@@ -560,7 +569,8 @@
560569
</div>
561570
</div>
562571

563-
<a data-toggle="collapse" href="#collapseTimeline" role="button">
572+
<a data-toggle="collapse" href="#collapseTimeline" role="button"
573+
aria-expanded="true" aria-controls="collapseTimeline">
564574
Collapse
565575
</a>
566576
</div>
@@ -617,7 +627,8 @@
617627
Export all
618628
</a>
619629

620-
<a data-toggle="collapse" href="#collapseHistory" role="button">
630+
<a data-toggle="collapse" href="#collapseHistory" role="button"
631+
aria-expanded="true" aria-controls="collapseHistory">
621632
Collapse
622633
</a>
623634
</div>
@@ -690,7 +701,8 @@
690701
</div>
691702
</div>
692703

693-
<a data-toggle="collapse" href="#collapseWaits" role="button">
704+
<a data-toggle="collapse" href="#collapseWaits" role="button"
705+
aria-expanded="true" aria-controls="collapseWaits">
694706
Collapse
695707
</a>
696708
</div>
@@ -779,7 +791,8 @@
779791
<div class="card-header d-flex align-items-center justify-content-between">
780792
<h5>Tasks</h5>
781793

782-
<a data-toggle="collapse" href="#collapseTasks" role="button">
794+
<a data-toggle="collapse" href="#collapseTasks" role="button"
795+
aria-expanded="true" aria-controls="collapseTasks">
783796
Collapse
784797
</a>
785798
</div>
@@ -896,7 +909,8 @@
896909
<div class="card-header d-flex align-items-center justify-content-between">
897910
<h5>Linked Intakes</h5>
898911

899-
<a data-toggle="collapse" href="#collapseLinkedIntakes" role="button">
912+
<a data-toggle="collapse" href="#collapseLinkedIntakes" role="button"
913+
aria-expanded="true" aria-controls="collapseLinkedIntakes">
900914
Collapse
901915
</a>
902916
</div>
@@ -967,7 +981,8 @@
967981
<div class="card-header d-flex align-items-center justify-content-between">
968982
<h5>Commands</h5>
969983

970-
<a data-toggle="collapse" href="#collapseCommands" role="button">
984+
<a data-toggle="collapse" href="#collapseCommands" role="button"
985+
aria-expanded="true" aria-controls="collapseCommands">
971986
Collapse
972987
</a>
973988
</div>
@@ -1056,7 +1071,8 @@
10561071
<div class="card-header d-flex align-items-center justify-content-between">
10571072
<h5>Signals</h5>
10581073

1059-
<a data-toggle="collapse" href="#collapseSignals" role="button">
1074+
<a data-toggle="collapse" href="#collapseSignals" role="button"
1075+
aria-expanded="true" aria-controls="collapseSignals">
10601076
Collapse
10611077
</a>
10621078
</div>
@@ -1145,7 +1161,8 @@
11451161
<div class="card-header d-flex align-items-center justify-content-between">
11461162
<h5>Updates</h5>
11471163

1148-
<a data-toggle="collapse" href="#collapseUpdates" role="button">
1164+
<a data-toggle="collapse" href="#collapseUpdates" role="button"
1165+
aria-expanded="true" aria-controls="collapseUpdates">
11491166
Collapse
11501167
</a>
11511168
</div>
@@ -1245,7 +1262,8 @@
12451262
<div class="card-header d-flex align-items-center justify-content-between">
12461263
<h5>Activities</h5>
12471264

1248-
<a data-toggle="collapse" href="#collapseActivities" role="button">
1265+
<a data-toggle="collapse" href="#collapseActivities" role="button"
1266+
aria-expanded="true" aria-controls="collapseActivities">
12491267
Collapse
12501268
</a>
12511269
</div>
@@ -1344,7 +1362,8 @@
13441362
</div>
13451363
</div>
13461364

1347-
<a data-toggle="collapse" href="#collapseTimers" role="button">
1365+
<a data-toggle="collapse" href="#collapseTimers" role="button"
1366+
aria-expanded="true" aria-controls="collapseTimers">
13481367
Collapse
13491368
</a>
13501369
</div>
@@ -1409,7 +1428,8 @@
14091428
<div class="card-header d-flex align-items-center justify-content-between">
14101429
<h5>Exceptions</h5>
14111430

1412-
<a data-toggle="collapse" href="#collapseExceptions" role="button">
1431+
<a data-toggle="collapse" href="#collapseExceptions" role="button"
1432+
aria-expanded="true" aria-controls="collapseExceptions">
14131433
Collapse
14141434
</a>
14151435
</div>

0 commit comments

Comments
 (0)