Skip to content

A11y improvements #6

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

Merged
matthiasstein merged 4 commits into from
Nov 20, 2025
Merged

A11y improvements #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3591d9d
template and css cleanup
julkuh Apr 15, 2025
4390430
adding aria-labels, tooltips and disable buttons when no layer and fi…
julkuh Apr 15, 2025
a1019ad
Improve attribute labeling edit section with tooltip and aria label. …
julkuh Apr 16, 2025
b79f6f0
implement default map.apps scroll behavior (fixed button bar at the b…
julkuh Apr 16, 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
142 changes: 86 additions & 56 deletions src/main/js/bundles/dn_labeling/LabelingWidget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@

-->
<template>
<div class="labelingWidgetContainer">
<div class="__selections-div">
<div>
<h4>{{ i18n.selectionTitle }}</h4>
<div class="ct-labeling-widget">
<div class="ct-labeling-widget__selections">
<v-sheet class="mb-1">
<h3>{{ i18n.selectionTitle }}</h3>
<v-autocomplete
v-model="selectedLayer"
:items="layers"
Expand All @@ -31,33 +31,47 @@
hide-details
class="pt-0 mt-0 pb-2"
/>
</div>
<div>
<div v-show="edit">
<v-sheet elevation="12">
<v-btn
id="iconRight"
icon
small
@click="edit = !edit"
>
<v-icon>close</v-icon>
</v-btn>
<div id="editText">
<v-text-field
v-model="editedField.prefix"
:label="i18n.prefix"
/>
<v-text-field
v-model="editedField.postfix"
:label="i18n.postfix"
/>
</div>
</v-sheet>
</v-sheet>
<v-sheet
v-show="edit"
class="my-1 ct-labeling-widget__edit-section"
>
<div class="align-right">
<v-tooltip
top
open-delay="800"
>
<template #activator="{ on }">
<v-btn
class="ct-labeling-widget__edit-close-section mr-2"
icon
small
:aria-label="i18n.finishEditingAttributeLabel"
v-on="on"
@click="edit = !edit"
>
<!--TODO: maybe change Icon!-->
<v-icon>close</v-icon>
</v-btn>
</template>
<span>{{ i18n.finishEditingAttributeLabel }}</span>
</v-tooltip>
</div>
<div class="ct-labeling-widget__edit-inputs">
<v-text-field
v-model="editedField.prefix"
:label="i18n.prefix"
/>
<v-text-field
v-model="editedField.postfix"
:label="i18n.postfix"
/>
</div>
<h4>{{ i18n.selectionFields }}</h4>
</v-sheet>
<v-sheet class="my-1">
<h3>{{ i18n.selectionFields }}</h3>
<!--TODO: Element not focusable with keyboard, even when not disabled-->
<v-select
id="autocomplete"
v-model="selectedFields"
:items="fields"
rounded
Expand All @@ -66,13 +80,13 @@
label="Felder auswählen"
item-text="name"
return-object
class="draggableSelect pt-1 mt-0"
class="ct-labeling-widget__draggable-select pt-1 mt-0"
clearable
:disabled="!selectedLayer"
>
<template #selection="data">
<draggable
:id="data.index"
:id="`ct-labeling-attribute-${data.index}`"
:list="selectedFields"
v-bind="dragOptionsChips"
:move="move"
Expand All @@ -91,27 +105,48 @@

<span>{{ data.item.name }}</span>
<span>
<v-btn
icon
@click="setEdit(data.item)"
<v-tooltip
top
open-delay="800"
>
<v-icon small>edit</v-icon>
</v-btn>
<v-btn
icon
@click="remove(data.item)"
<template #activator="{ on }">
<v-btn
icon
:aria-label="i18n.editAttributeLabel"
v-on="on"
@click="setEdit(data.item)"
>
<v-icon small>edit</v-icon>
</v-btn>
</template>
<span>{{ i18n.editAttributeLabel }}</span>
</v-tooltip>
<v-tooltip
top
open-delay="800"
>
<v-icon small>close</v-icon>
</v-btn>
<template #activator="{ on }">
<v-btn
icon
:aria-label="i18n.deleteAttributeLabel"
v-on="on"
@click="remove(data.item)"
>
<v-icon small>close</v-icon>
</v-btn>
</template>
<span>{{ i18n.deleteAttributeLabel }}</span>
</v-tooltip>
</span>
</v-chip>
</draggable>
</template>
</v-select>
</div>
</v-sheet>
</div>
<div class="__controls-div">
<div>
<v-divider />
<div class="ct-labeling-widget__controls-div">
<div class="my-1">
<v-switch
v-model="showFeatureEdgeLengths"
class="controls circumference-switch"
Expand All @@ -122,23 +157,18 @@
</div>
<div>
<v-btn
v-if="!active"
color="primary"
@click.native="setLabeling"
>
<v-icon>icon-play</v-icon>
{{ i18n.labeling.start }}
</v-btn>
<v-btn
v-else
color="primary"
:aria-pressed="active"
:disabled="selectedFields.length === 0"
@click.native="setLabeling"
>
<v-icon>icon-pause</v-icon>
{{ i18n.labeling.stop }}
<v-icon>{{ !active ? "icon-play" : "icon-pause" }}</v-icon>
{{ !active ? i18n.labeling.start : i18n.labeling.stop }}
</v-btn>
<v-btn
color="secondary"
color="error"
outline
:disabled="!selectedLayer || (selectedLayer && selectedFields.length === 0)"
@click.native="deleteLabel"
>
<v-icon>icon-trashcan-detailed</v-icon>
Expand Down
48 changes: 22 additions & 26 deletions src/main/js/bundles/dn_labeling/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.ctAppRoot .labelingWidget .labelingWidgetContainer {
.ctAppRoot .ct-labeling-widget {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;

.__selections-div {
.ct-labeling-widget__selections {
display: flex;
flex-direction: column;
flex-grow: 1;
flex: 1 1 auto;
overflow: auto;

.v-select__selections {
display: grid;
Expand All @@ -31,18 +33,19 @@
.v-chip {
width: 98%;

.v-chip__content{
.v-chip__content {
width: 100%;
padding: 0;
cursor: move;
}
}
}
}

.__controls-div {
.ct-labeling-widget__controls-div {
display: flex;
flex-direction: column;
flex-shrink: 1;
flex: 0 0 auto;

.circumference-switch {
margin-top: 0;
Expand All @@ -53,30 +56,23 @@
margin-left: 0;
}
}
}

.ctAppRoot .labelingWidget .v-btn--icon{
margin: 0;
}

.ctAppRoot .labelingWidget #editText{
padding: 5px;
margin: 10px;
}
.v-btn--icon {
margin: 0;
}

.ctAppRoot .labelingWidget #iconRight{
float: right;
}
.ct-labeling-widget__edit-inputs {
padding: 5px;
margin: 10px;
}

.ctAppRoot .labelingWidget #autocomplete {
display: none;
}
.ct-labeling-widget__draggable-select.v-input--is-dirty .v-input__slot:before {
display: none;
}

.ctAppRoot .labelingWidget .draggableSelect.v-input--is-dirty .v-input__slot:before {
display: none;
.ct-labeling-widget__selections .v-select__selections .v-chip span {
color: #45474d;
}
}

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

3 changes: 3 additions & 0 deletions src/main/js/bundles/dn_labeling/nls/bundle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ const i18n = {
tooltip: "Labeling Tool",
selectionTitle: "Select Layer",
selectionFields: "Select Fields",
editAttributeLabel: "Edit attribute label",
finishEditingAttributeLabel: "Finish editing attribute label",
deleteAttributeLabel: "Delete attribute label",
edgesLabel: "Label Edge Lengths",
autoUpdate: "Keep updated",
prefix: "Prefix",
Expand Down
3 changes: 3 additions & 0 deletions src/main/js/bundles/dn_labeling/nls/de/bundle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ export default {
tooltip: "Beschriftungswerkzeug",
selectionTitle: "Layer auswählen",
selectionFields: "Felder auswählen",
editAttributeLabel: "Attributbeschriftung bearbeiten",
finishEditingAttributeLabel: "Bearbeitung der Attributbeschriftung beenden",
deleteAttributeLabel: "Attributbeschriftung entfernen",
edgesLabel: "Kantenlängen beschriften",
autoUpdate: "Änderungen automatisch anwenden",
prefix: "Präfix",
Expand Down
Loading