Skip to content

Commit 53d68c1

Browse files
DileepadariDileepadari
committed
some changes for options dropdown and semantics
1 parent 0adc955 commit 53d68c1

File tree

9 files changed

+612
-367
lines changed

9 files changed

+612
-367
lines changed

‎administrator/components/com_workflow/resources/scripts/components/App.vue‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,44 @@
11
<template>
2-
<div
2+
<main
33
id="workflow-app"
44
class="d-flex flex-column flex-grow-1 min-vh-80"
5+
role="main"
6+
aria-labelledby="workflow-main-title"
57
>
6-
<div
7-
id="workflow-title"
8+
<header
9+
id="workflow-header"
810
class="d-flex flex-column flex-shrink-0"
11+
role="banner"
912
>
1013
<WorkflowTitlebar
1114
:save-status="saveStatus"
1215
/>
13-
</div>
16+
</header>
17+
1418
<div class="d-flex flex-grow-1 overflow-hidden">
15-
<div
19+
<section
1620
id="main-canvas"
1721
class="flex-grow-1 position-relative"
22+
role="application"
23+
aria-label="Workflow Canvas Application"
24+
aria-describedby="canvas-description"
1825
>
26+
<div
27+
id="canvas-description"
28+
class="visually-hidden"
29+
>
30+
Interactive workflow diagram. Use keyboard shortcuts: Alt+N to add stage, Alt+M to add transition, F to fit view, E to edit selected item, Delete to remove selected item.
31+
</div>
32+
1933
<WorkflowCanvas
2034
ref="canvas"
2135
:save-status="saveStatus"
2236
:set-save-status="setSaveStatus"
2337
@focus-request="handleCanvasFocus"
2438
/>
25-
</div>
39+
</section>
2640
</div>
27-
</div>
41+
</main>
2842
</template>
2943

3044
<script setup>

‎administrator/components/com_workflow/resources/scripts/components/Titlebar.vue‎

Lines changed: 51 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,77 @@
11
<template>
22
<section
33
class="d-flex flex-wrap align-items-center justify-content-between"
4-
aria-labelledby="workflow-title"
4+
aria-labelledby="workflow-main-title"
5+
role="banner"
56
>
67
<div class="col-md-6 d-flex flex-column">
7-
<h2 class="mb-2">
8+
<h1
9+
id="workflow-main-title"
10+
class="mb-2"
11+
>
812
{{ translate(workflow?.title) }}
9-
</h2>
13+
</h1>
1014
<dl
1115
class="d-flex align-items-center flex-wrap mb-0"
12-
aria-label="workflow details"
16+
aria-label="Workflow Details"
1317
>
14-
<dt class="visually-hidden">
15-
{{ sprintf('COM_WORKFLOW_GRAPH_STATUS', workflow.published ? 'COM_WORKFLOW_GRAPH_ENABLED' : 'COM_WORKFLOW_GRAPH_DISABLED') }}
16-
</dt>
17-
<dd class="me-3 mb-1 d-flex">
18-
<span
19-
class="badge"
20-
:class="workflow.published ? 'bg-success' : 'bg-warning'"
21-
role="status"
22-
>
23-
{{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
24-
</span>
25-
</dd>
18+
<div class="me-3 mb-1 d-flex">
19+
<dt class="visually-hidden">
20+
Status:
21+
</dt>
22+
<dd class="mb-0">
23+
<span
24+
class="badge"
25+
:class="workflow.published ? 'bg-success' : 'bg-warning'"
26+
role="status"
27+
:aria-label="`Status: ${workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED')}`"
28+
>
29+
{{ workflow.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
30+
</span>
31+
</dd>
32+
</div>
2633

27-
<dt class="visually-hidden">
28-
{{ sprintf('COM_WORKFLOW_GRAPH_STAGE_COUNT', stagesCount) }}
29-
</dt>
30-
<dd class="me-3 mb-1 d-flex">
31-
{{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
32-
</dd>
34+
<div class="me-3 mb-1 d-flex">
35+
<dt class="visually-hidden">
36+
Stage Count:
37+
</dt>
38+
<dd class="mb-0">
39+
<span aria-label="`${stagesCount} ${stagesCount === 1 ? 'stage' : 'stages'} in workflow`">
40+
{{ stagesCount }} {{ stagesCount === 1 ? translate('COM_WORKFLOW_GRAPH_STAGE') : translate('COM_WORKFLOW_GRAPH_STAGES') }}
41+
</span>
42+
</dd>
43+
</div>
3344

34-
<dt class="visually-hidden">
35-
{{ sprintf('COM_WORKFLOW_GRAPH_TRANSITION_COUNT', transitionsCount) }}
36-
</dt>
37-
<dd class="me-3 mb-1 d-flex">
38-
{{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION')
39-
: translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
40-
</dd>
45+
<div class="me-3 mb-1 d-flex">
46+
<dt class="visually-hidden">
47+
Transition Count:
48+
</dt>
49+
<dd class="mb-0">
50+
<span :aria-label="`${transitionsCount} ${transitionsCount === 1 ? 'transition' : 'transitions'} in workflow`">
51+
{{ transitionsCount }} {{ transitionsCount === 1 ? translate('COM_WORKFLOW_GRAPH_TRANSITION')
52+
: translate('COM_WORKFLOW_GRAPH_TRANSITIONS') }}
53+
</span>
54+
</dd>
55+
</div>
4156
</dl>
4257
</div>
43-
<div
44-
id="save-message"
58+
59+
<aside
60+
id="save-status"
4561
class="mb-2 fw-bold"
62+
role="status"
63+
aria-live="polite"
4664
:class="{
4765
'text-warning': saveStatus.value === 'unsaved',
4866
}"
67+
:aria-label="`Save status: ${saveStatus.value === 'unsaved' ? 'Unsaved changes' : 'All changes saved'}`"
4968
>
5069
{{
5170
saveStatus.value === 'unsaved'
5271
? translate('COM_WORKFLOW_GRAPH_UNSAVED_CHANGES')
5372
: translate('COM_WORKFLOW_GRAPH_UP_TO_DATE')
5473
}}
55-
</div>
74+
</aside>
5675
</section>
5776
</template>
5877

‎administrator/components/com_workflow/resources/scripts/components/canvas/ControlsPanel.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<template>
22
<Panel
33
position="top-left"
4-
aria-label="Workflow actions"
4+
aria-labelledby="controls-panel-title"
55
class="d-flex gap-2 p-2"
6+
role="toolbar"
67
>
8+
<h2 id="controls-panel-title" class="visually-hidden">Workflow Creation Controls</h2>
9+
710
<button
811
class="toolbar-button btn btn-primary d-flex align-items-center gap-1"
912
tabindex="0"
13+
type="button"
1014
:aria-label="translate('COM_WORKFLOW_GRAPH_ADD_STAGE')"
15+
:title="`${translate('COM_WORKFLOW_GRAPH_ADD_STAGE')} (Alt+N)`"
1116
@click="$emit('add-stage')"
17+
@keydown.enter="$emit('add-stage')"
18+
@keydown.space.prevent="$emit('add-stage')"
1219
>
1320
<span
1421
class="icon icon-plus"
@@ -20,8 +27,12 @@
2027
<button
2128
class="toolbar-button btn btn-info d-flex align-items-center gap-1"
2229
tabindex="0"
30+
type="button"
2331
:aria-label="translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION')"
32+
:title="`${translate('COM_WORKFLOW_GRAPH_ADD_TRANSITION')} (Alt+M)`"
2433
@click="$emit('add-transition')"
34+
@keydown.enter="$emit('add-transition')"
35+
@keydown.space.prevent="$emit('add-transition')"
2536
>
2637
<span
2738
class="icon icon-plus"

‎administrator/components/com_workflow/resources/scripts/components/canvas/CustomControls.vue‎

Lines changed: 54 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,61 @@
11
<template>
2-
<div
2+
<nav
33
ref="controlsContainer"
44
class="custom-controls z-10"
55
tabindex="0"
6+
role="toolbar"
7+
aria-labelledby="canvas-controls-title"
68
>
7-
<button
8-
class="toolbar-button custom-controls-button"
9-
tabindex="0"
10-
aria-label="Zoom in"
11-
title="Zoom in (+ key)"
12-
@click="zoomIn"
13-
>
14-
<i class="icon icon-plus" />
15-
</button>
16-
<button
17-
class="toolbar-button custom-controls-button"
18-
tabindex="0"
19-
aria-label="Zoom out"
20-
title="Zoom out (- key)"
21-
@click="zoomOut"
22-
>
23-
<i class="icon icon-minus" />
24-
</button>
25-
<button
26-
class="toolbar-button custom-controls-button"
27-
tabindex="0"
28-
aria-label="Fit view"
29-
title="Fit view (F key)"
30-
@click="customFitView"
31-
>
32-
<i class="icon icon-expand" />
33-
</button>
34-
</div>
9+
<h2 id="canvas-controls-title" class="visually-hidden">Canvas View Controls</h2>
10+
11+
<ul class="d-flex flex-column gap-1 list-unstyled mb-0" role="group">
12+
<li>
13+
<button
14+
class="toolbar-button custom-controls-button"
15+
tabindex="0"
16+
type="button"
17+
aria-label="Zoom in"
18+
title="Zoom in (+ key)"
19+
@click="zoomIn"
20+
@keydown.enter="zoomIn"
21+
@keydown.space.prevent="zoomIn"
22+
>
23+
<span class="icon icon-plus" aria-hidden="true" />
24+
<span class="visually-hidden">Zoom In</span>
25+
</button>
26+
</li>
27+
<li>
28+
<button
29+
class="toolbar-button custom-controls-button"
30+
tabindex="0"
31+
type="button"
32+
aria-label="Zoom out"
33+
title="Zoom out (- key)"
34+
@click="zoomOut"
35+
@keydown.enter="zoomOut"
36+
@keydown.space.prevent="zoomOut"
37+
>
38+
<span class="icon icon-minus" aria-hidden="true" />
39+
<span class="visually-hidden">Zoom Out</span>
40+
</button>
41+
</li>
42+
<li>
43+
<button
44+
class="toolbar-button custom-controls-button"
45+
tabindex="0"
46+
type="button"
47+
aria-label="Fit view"
48+
title="Fit view (F key)"
49+
@click="customFitView"
50+
@keydown.enter="customFitView"
51+
@keydown.space.prevent="customFitView"
52+
>
53+
<span class="icon icon-expand" aria-hidden="true" />
54+
<span class="visually-hidden">Fit View</span>
55+
</button>
56+
</li>
57+
</ul>
58+
</nav>
3559
</template>
3660

3761
<script>
@@ -58,4 +82,4 @@ export default {
5882
};
5983
},
6084
};
61-
</script>
85+
</script>clear

0 commit comments

Comments
 (0)