diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index e8597eebda..ed6e7c478f 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/modules/ui/sections/raw_member_editor.js @@ -16,7 +16,7 @@ import { svgIcon } from '../../svg/icon'; import { services } from '../../services'; import { uiCombobox } from '../combobox'; import { uiSection } from '../section'; -import { utilDisplayName, utilDisplayType, utilHighlightEntities, utilNoAuto } from '../../util'; +import { utilDisplayName, utilDisplayType, utilHighlightEntities, utilNoAuto, utilUniqueDomId } from '../../util'; export function uiSectionRawMemberEditor(context) { @@ -121,7 +121,8 @@ export function uiSectionRawMemberEditor(context) { type: member.type, role: member.role, relation: entity, - member: context.hasEntity(member.id) + member: context.hasEntity(member.id), + domId: utilUniqueDomId(entityID + '-member-' + index) }); }); @@ -155,7 +156,8 @@ export function uiSectionRawMemberEditor(context) { var label = item .append('label') - .attr('class', 'field-label'); + .attr('class', 'field-label') + .attr('for', d.domId); if (d.member) { // highlight the member feature in the map while hovering on the list item @@ -226,6 +228,9 @@ export function uiSectionRawMemberEditor(context) { wrapEnter .append('input') .attr('class', 'member-role') + .attr('id', function(d) { + return d.domId; + }) .property('type', 'text') .attr('maxlength', context.maxCharsForRelationRole()) .attr('placeholder', t('inspector.role')) diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index 498c1f101b..d3d1dd9740 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/modules/ui/sections/raw_membership_editor.js @@ -18,7 +18,7 @@ import { svgIcon } from '../../svg/icon'; import { uiCombobox } from '../combobox'; import { uiSection } from '../section'; import { uiTooltip } from '../tooltip'; -import { utilArrayGroupBy, utilDisplayName, utilNoAuto, utilHighlightEntities } from '../../util'; +import { utilArrayGroupBy, utilDisplayName, utilNoAuto, utilHighlightEntities, utilUniqueDomId } from '../../util'; export function uiSectionRawMembershipEditor(context) { @@ -190,7 +190,12 @@ export function uiSectionRawMembershipEditor(context) { parents.slice(0, _maxMemberships).forEach(function(relation) { relation.members.forEach(function(member, index) { if (member.id === entity.id) { - memberships.push({ relation: relation, member: member, index: index }); + memberships.push({ + relation: relation, + member: member, + index: index, + domId: utilUniqueDomId(entityID + '-membership-' + relation.id + '-' + index) + }); } }); }); @@ -229,6 +234,9 @@ export function uiSectionRawMembershipEditor(context) { var labelEnter = itemsEnter .append('label') .attr('class', 'field-label') + .attr('for', function(d) { + return d.domId; + }) .append('span') .attr('class', 'label-text') .append('a') @@ -255,6 +263,9 @@ export function uiSectionRawMembershipEditor(context) { wrapEnter .append('input') .attr('class', 'member-role') + .attr('id', function(d) { + return d.domId; + }) .property('type', 'text') .attr('maxlength', context.maxCharsForRelationRole()) .attr('placeholder', t('inspector.role'))