Skip to content

Commit f4e290d

Browse files
DileepadariDileepadari
committed
edge and stage layout changed
1 parent 1b5cdf3 commit f4e290d

File tree

2 files changed

+22
-36
lines changed

2 files changed

+22
-36
lines changed

‎administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,13 @@
1414

1515
<!-- Edge label & actions rendered in HTML overlay -->
1616
<EdgeLabelRenderer>
17-
<article
17+
<div
1818
ref="edgeLabel"
1919
class="edge-label"
2020
tabindex="0"
2121
:data-edge-id="data?.id"
2222
role="button"
23-
:aria-label="`Transition: ${data?.title}. From ${sourceStageTitle} to ${targetStageTitle}. ${data?.published ? 'Published' : 'Unpublished'}`"
24-
:aria-selected="data?.isSelected"
23+
:aria-pressed="data?.isSelected ? 'true' : 'false'"
2524
:aria-describedby="`transition-${data?.id}-description`"
2625
:style="{
2726
position: 'absolute',
@@ -84,7 +83,6 @@
8483
class="btn btn-sm btn-secondary text-start text-white fw-semibold text-truncate"
8584
role="menuitem"
8685
tabindex="0"
87-
:aria-label="`Edit transition ${data?.title}`"
8886
:title="`Edit transition ${data?.title}`"
8987
@click.stop="handleEdit"
9088
@keydown.enter.stop="handleEdit"
@@ -101,7 +99,6 @@
10199
class="btn btn-sm btn-danger text-start mt-1 text-white fw-semibold text-truncate"
102100
role="menuitem"
103101
tabindex="0"
104-
:aria-label="`Delete transition ${data?.title}`"
105102
:title="`Delete transition ${data?.title}`"
106103
@click.stop="handleDelete"
107104
@keydown.enter.stop="handleDelete"
@@ -113,13 +110,13 @@
113110
</nav>
114111

115112
<!-- Title Row -->
116-
<header class="d-flex justify-content-around align-items-center p-1 pe-1 z-1 position-relative">
117-
<h3
113+
<div class="d-flex justify-content-around align-items-center p-1 pe-1 z-1 position-relative">
114+
<span
118115
class="h4 d-block card-title text-white fw-semibold text-truncate ms-4"
119116
:title="data?.title"
120117
>
121118
{{ data?.title }}
122-
</h3>
119+
</span>
123120

124121
<!-- Ellipsis Menu Button -->
125122
<div class="align-items-center d-flex position-relative">
@@ -130,7 +127,6 @@
130127
class="btn btn-sm btn-secondary ms-1 px-1 py-0"
131128
:class="{ 'invisible': !isHovered && !showActions }"
132129
style="transition: opacity 0.2s ease;"
133-
:aria-label="showActions ? `Close actions menu for ${data?.title}` : `Open actions menu for ${data?.title}`"
134130
:title="showActions ? `Close actions menu for ${data?.title}` : `Open actions menu for ${data?.title}`"
135131
aria-haspopup="true"
136132
:aria-expanded="showActions"
@@ -148,7 +144,7 @@
148144
</span>
149145
</button>
150146
</div>
151-
</header>
147+
</div>
152148
</div>
153149

154150
<!-- Hidden measurer -->
@@ -160,7 +156,7 @@
160156
>
161157
{{ data?.title }}
162158
</span>
163-
</article>
159+
</div>
164160
</EdgeLabelRenderer>
165161
</g>
166162
</template>

‎administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<template>
2-
<article
2+
<div
33
class="stage-node card border shadow-sm position-relative"
44
:class="{ 'shadow': isSelected, 'hover-shadow': !isSelected }"
55
:style="stageStyle"
66
tabindex="0"
77
:data-stage-id="stage?.id"
8-
role="button"
9-
:aria-label="`Stage: ${stage?.title}. ${stage?.published ? 'Published' : 'Unpublished'}${stage?.default ? ', Default stage' : ''}`"
10-
:aria-selected="isSelected"
118
:aria-describedby="`stage-${stage?.id}-description`"
129
@mouseenter="onNodeEnter"
1310
@mouseleave="onNodeLeave"
@@ -56,7 +53,6 @@
5653
class="btn btn-sm btn-secondary text-start text-white fw-semibold text-truncate"
5754
role="menuitem"
5855
tabindex="0"
59-
:aria-label="`Edit stage ${stage?.title}`"
6056
:title="`Edit stage ${stage?.title}`"
6157
@click.stop="handleEdit"
6258
@keydown.enter.stop="handleEdit"
@@ -76,7 +72,6 @@
7672
class="btn btn-sm btn-danger mt-1 text-start text-white fw-semibold text-truncate"
7773
role="menuitem"
7874
tabindex="0"
79-
:aria-label="`Delete stage ${stage?.title}`"
8075
:title="`Delete stage ${stage?.title}`"
8176
@click.stop="handleDelete"
8277
@keydown.enter.stop="handleDelete"
@@ -101,46 +96,47 @@
10196
class="edge-handler bg-success position-absolute top-0 start-50 translate-middle-x rounded-circle"
10297
:class="{ 'invisible': !isHoveredOrFocused || showActions }"
10398
:position="Position.Top"
104-
:aria-label="`Connect to top of ${stage?.title}`"
99+
aria-hidden="true"
105100
/>
106101
<Handle
107102
type="source"
108103
class="edge-handler bg-success position-absolute bottom-0 start-50 translate-middle-x rounded-circle"
109104
:class="{ 'invisible': !isHoveredOrFocused || showActions }"
110105
:position="Position.Bottom"
111-
:aria-label="`Connect from bottom of ${stage?.title}`"
106+
aria-hidden="true"
112107
/>
113108
<Handle
114109
type="target"
115110
class="edge-handler bg-success position-absolute top-50 start-0 translate-middle-y rounded-circle"
116111
:class="{ 'invisible': !isHoveredOrFocused || showActions }"
117112
:position="Position.Left"
118-
:aria-label="`Connect to left of ${stage?.title}`"
113+
aria-hidden="true"
119114
/>
120115
<Handle
121116
type="source"
122117
class="edge-handler bg-success position-absolute top-50 end-0 translate-middle-y rounded-circle"
123118
:position="Position.Right"
124119
:class="{ 'invisible': !isHoveredOrFocused || showActions }"
125-
:aria-label="`Connect from right of ${stage?.title}`"
120+
aria-hidden="true"
126121
/>
127122
</div>
128123

129124
<!-- Header -->
130-
<header class="card-header d-flex justify-content-between align-items-start p-1 pe-0 z-1 position-relative">
125+
<div class="card-header d-flex justify-content-between align-items-start p-1 pe-0 z-1 position-relative">
131126
<div class="flex-fill w-75 me-3 min-width-0">
132-
<h3
127+
<span
133128
class="h3 d-block card-title mb-1 text-white fw-semibold text-truncate"
134129
:title="stage?.title"
130+
aria-level="3"
135131
>
136132
{{ stage.title }}
137-
</h3>
138-
<p
139-
class="card-text text-white-50 mb-0 text-truncate"
133+
</span>
134+
<span
135+
class="card-text text-white-50 mb-0 text-truncate d-block"
140136
:title="stage?.description"
141137
>
142138
{{ stage.description }}
143-
</p>
139+
</span>
144140
</div>
145141

146142
<!-- Actions Button -->
@@ -155,7 +151,6 @@
155151
class="btn btn-sm btn-light px-1 py-0"
156152
:class="{ 'invisible': !isHoveredOrFocused && !showActions }"
157153
style="transition: opacity 0.2s ease;"
158-
:aria-label="showActions ? `Close actions menu for ${stage?.title}` : `Open actions menu for ${stage?.title}`"
159154
:title="showActions ? `Close actions menu for ${stage?.title}` : `Open actions menu for ${stage?.title}`"
160155
aria-haspopup="true"
161156
:aria-expanded="showActions"
@@ -173,25 +168,21 @@
173168
</span>
174169
</button>
175170
</div>
176-
</header>
171+
</div>
177172

178173
<!-- Body -->
179174
<div class="card-body px-1 py-0 z-1 position-relative">
180175
<div class="d-flex justify-content-between align-items-center">
181176
<span
182177
:class="stage.published ? 'bg-success' : 'bg-danger'"
183178
class="badge rounded-pill p-1"
184-
role="status"
185-
:aria-label="`Status: ${stage.published ? 'Published' : 'Unpublished'}`"
186179
>
187180
{{ stage.published ? translate('COM_WORKFLOW_GRAPH_ENABLED') : translate('COM_WORKFLOW_GRAPH_DISABLED') }}
188181
</span>
189182
<div class="d-flex gap-1">
190183
<span
191184
v-if="stage.default"
192185
class="badge bg-warning bg-opacity-10 rounded-pill p-1"
193-
role="status"
194-
aria-label="Default stage"
195186
>
196187
{{ translate('COM_WORKFLOW_GRAPH_DEFAULT') }}
197188
</span>
@@ -203,10 +194,9 @@
203194
<span
204195
class="position-absolute top-0 end-0 mt-2 me-2 rounded-circle d-block w-10 h-10"
205196
:style="badgeStyle"
206-
:aria-label="`Stage color indicator: ${stage?.title}`"
207-
role="img"
197+
aria-hidden="true"
208198
/>
209-
</article>
199+
</div>
210200
</template>
211201

212202
<script>

0 commit comments

Comments
 (0)