Skip to content

Commit e043dd0

Browse files
author
Matthias Stein
authored
Merge pull request #6 from conterra/a11y-improvements
A11y improvements
2 parents f3e51e9 + b79f6f0 commit e043dd0

4 files changed

Lines changed: 114 additions & 82 deletions

File tree

‎src/main/js/bundles/dn_labeling/LabelingWidget.vue‎

Lines changed: 86 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
1717
-->
1818
<template>
19-
<div class="labelingWidgetContainer">
20-
<div class="__selections-div">
21-
<div>
22-
<h4>{{ i18n.selectionTitle }}</h4>
19+
<div class="ct-labeling-widget">
20+
<div class="ct-labeling-widget__selections">
21+
<v-sheet class="mb-1">
22+
<h3>{{ i18n.selectionTitle }}</h3>
2323
<v-autocomplete
2424
v-model="selectedLayer"
2525
:items="layers"
@@ -31,33 +31,47 @@
3131
hide-details
3232
class="pt-0 mt-0 pb-2"
3333
/>
34-
</div>
35-
<div>
36-
<div v-show="edit">
37-
<v-sheet elevation="12">
38-
<v-btn
39-
id="iconRight"
40-
icon
41-
small
42-
@click="edit = !edit"
43-
>
44-
<v-icon>close</v-icon>
45-
</v-btn>
46-
<div id="editText">
47-
<v-text-field
48-
v-model="editedField.prefix"
49-
:label="i18n.prefix"
50-
/>
51-
<v-text-field
52-
v-model="editedField.postfix"
53-
:label="i18n.postfix"
54-
/>
55-
</div>
56-
</v-sheet>
34+
</v-sheet>
35+
<v-sheet
36+
v-show="edit"
37+
class="my-1 ct-labeling-widget__edit-section"
38+
>
39+
<div class="align-right">
40+
<v-tooltip
41+
top
42+
open-delay="800"
43+
>
44+
<template #activator="{ on }">
45+
<v-btn
46+
class="ct-labeling-widget__edit-close-section mr-2"
47+
icon
48+
small
49+
:aria-label="i18n.finishEditingAttributeLabel"
50+
v-on="on"
51+
@click="edit = !edit"
52+
>
53+
<!--TODO: maybe change Icon!-->
54+
<v-icon>close</v-icon>
55+
</v-btn>
56+
</template>
57+
<span>{{ i18n.finishEditingAttributeLabel }}</span>
58+
</v-tooltip>
59+
</div>
60+
<div class="ct-labeling-widget__edit-inputs">
61+
<v-text-field
62+
v-model="editedField.prefix"
63+
:label="i18n.prefix"
64+
/>
65+
<v-text-field
66+
v-model="editedField.postfix"
67+
:label="i18n.postfix"
68+
/>
5769
</div>
58-
<h4>{{ i18n.selectionFields }}</h4>
70+
</v-sheet>
71+
<v-sheet class="my-1">
72+
<h3>{{ i18n.selectionFields }}</h3>
73+
<!--TODO: Element not focusable with keyboard, even when not disabled-->
5974
<v-select
60-
id="autocomplete"
6175
v-model="selectedFields"
6276
:items="fields"
6377
rounded
@@ -66,13 +80,13 @@
6680
:label="i18n.selectionFields"
6781
item-text="name"
6882
return-object
69-
class="draggableSelect pt-1 mt-0"
83+
class="ct-labeling-widget__draggable-select pt-1 mt-0"
7084
clearable
7185
:disabled="!selectedLayer"
7286
>
7387
<template #selection="data">
7488
<draggable
75-
:id="data.index"
89+
:id="`ct-labeling-attribute-${data.index}`"
7690
:list="selectedFields"
7791
v-bind="dragOptionsChips"
7892
:move="move"
@@ -91,27 +105,48 @@
91105

92106
<span>{{ data.item.name }}</span>
93107
<span>
94-
<v-btn
95-
icon
96-
@click="setEdit(data.item)"
108+
<v-tooltip
109+
top
110+
open-delay="800"
97111
>
98-
<v-icon small>edit</v-icon>
99-
</v-btn>
100-
<v-btn
101-
icon
102-
@click="remove(data.item)"
112+
<template #activator="{ on }">
113+
<v-btn
114+
icon
115+
:aria-label="i18n.editAttributeLabel"
116+
v-on="on"
117+
@click="setEdit(data.item)"
118+
>
119+
<v-icon small>edit</v-icon>
120+
</v-btn>
121+
</template>
122+
<span>{{ i18n.editAttributeLabel }}</span>
123+
</v-tooltip>
124+
<v-tooltip
125+
top
126+
open-delay="800"
103127
>
104-
<v-icon small>close</v-icon>
105-
</v-btn>
128+
<template #activator="{ on }">
129+
<v-btn
130+
icon
131+
:aria-label="i18n.deleteAttributeLabel"
132+
v-on="on"
133+
@click="remove(data.item)"
134+
>
135+
<v-icon small>close</v-icon>
136+
</v-btn>
137+
</template>
138+
<span>{{ i18n.deleteAttributeLabel }}</span>
139+
</v-tooltip>
106140
</span>
107141
</v-chip>
108142
</draggable>
109143
</template>
110144
</v-select>
111-
</div>
145+
</v-sheet>
112146
</div>
113-
<div class="__controls-div">
114-
<div>
147+
<v-divider />
148+
<div class="ct-labeling-widget__controls-div">
149+
<div class="my-1">
115150
<v-switch
116151
v-model="showFeatureEdgeLengths"
117152
class="controls circumference-switch"
@@ -122,23 +157,18 @@
122157
</div>
123158
<div>
124159
<v-btn
125-
v-if="!active"
126-
color="primary"
127-
@click.native="setLabeling"
128-
>
129-
<v-icon>icon-play</v-icon>
130-
{{ i18n.labeling.start }}
131-
</v-btn>
132-
<v-btn
133-
v-else
134160
color="primary"
161+
:aria-pressed="active"
162+
:disabled="selectedFields.length === 0"
135163
@click.native="setLabeling"
136164
>
137-
<v-icon>icon-pause</v-icon>
138-
{{ i18n.labeling.stop }}
165+
<v-icon>{{ !active ? "icon-play" : "icon-pause" }}</v-icon>
166+
{{ !active ? i18n.labeling.start : i18n.labeling.stop }}
139167
</v-btn>
140168
<v-btn
141-
color="secondary"
169+
color="error"
170+
outline
171+
:disabled="!selectedLayer || (selectedLayer && selectedFields.length === 0)"
142172
@click.native="deleteLabel"
143173
>
144174
<v-icon>icon-trashcan-detailed</v-icon>

‎src/main/js/bundles/dn_labeling/css/styles.css‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,17 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
.ctAppRoot .labelingWidget .labelingWidgetContainer {
16+
.ctAppRoot .ct-labeling-widget {
1717
display: flex;
1818
flex-direction: column;
1919
height: 100%;
20+
justify-content: space-between;
2021

21-
.__selections-div {
22+
.ct-labeling-widget__selections {
2223
display: flex;
2324
flex-direction: column;
24-
flex-grow: 1;
25+
flex: 1 1 auto;
26+
overflow: auto;
2527

2628
.v-select__selections {
2729
display: grid;
@@ -31,18 +33,19 @@
3133
.v-chip {
3234
width: 98%;
3335

34-
.v-chip__content{
36+
.v-chip__content {
3537
width: 100%;
3638
padding: 0;
39+
cursor: move;
3740
}
3841
}
3942
}
4043
}
4144

42-
.__controls-div {
45+
.ct-labeling-widget__controls-div {
4346
display: flex;
4447
flex-direction: column;
45-
flex-shrink: 1;
48+
flex: 0 0 auto;
4649

4750
.circumference-switch {
4851
margin-top: 0;
@@ -53,30 +56,23 @@
5356
margin-left: 0;
5457
}
5558
}
56-
}
57-
58-
.ctAppRoot .labelingWidget .v-btn--icon{
59-
margin: 0;
60-
}
6159

62-
.ctAppRoot .labelingWidget #editText{
63-
padding: 5px;
64-
margin: 10px;
65-
}
60+
.v-btn--icon {
61+
margin: 0;
62+
}
6663

67-
.ctAppRoot .labelingWidget #iconRight{
68-
float: right;
69-
}
64+
.ct-labeling-widget__edit-inputs {
65+
padding: 5px;
66+
margin: 10px;
67+
}
7068

71-
.ctAppRoot .labelingWidget #autocomplete {
72-
display: none;
73-
}
69+
.ct-labeling-widget__draggable-select.v-input--is-dirty .v-input__slot:before {
70+
display: none;
71+
}
7472

75-
.ctAppRoot .labelingWidget .draggableSelect.v-input--is-dirty .v-input__slot:before {
76-
display: none;
73+
.ct-labeling-widget__selections .v-select__selections .v-chip span {
74+
color: #45474d;
75+
}
7776
}
7877

79-
.ctAppRoot .labelingWidget .labelingWidgetContainer .__selections-div .v-select__selections .v-chip span {
80-
color: #45474d;
81-
}
8278

‎src/main/js/bundles/dn_labeling/nls/bundle.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ const i18n = {
3838
tooltip: "Labeling Tool",
3939
selectionTitle: "Select Layer",
4040
selectionFields: "Select Fields",
41+
editAttributeLabel: "Edit attribute label",
42+
finishEditingAttributeLabel: "Finish editing attribute label",
43+
deleteAttributeLabel: "Delete attribute label",
4144
edgesLabel: "Label Edge Lengths",
4245
autoUpdate: "Keep updated",
4346
prefix: "Prefix",

‎src/main/js/bundles/dn_labeling/nls/de/bundle.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ export default {
4040
tooltip: "Beschriftungswerkzeug",
4141
selectionTitle: "Layer auswählen",
4242
selectionFields: "Felder auswählen",
43+
editAttributeLabel: "Attributbeschriftung bearbeiten",
44+
finishEditingAttributeLabel: "Bearbeitung der Attributbeschriftung beenden",
45+
deleteAttributeLabel: "Attributbeschriftung entfernen",
4346
edgesLabel: "Kantenlängen beschriften",
4447
autoUpdate: "Änderungen automatisch anwenden",
4548
prefix: "Präfix",

0 commit comments

Comments
 (0)