CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-24 17:14:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make the issues inspector section navigable with the keyboard (re: #8004)

Browse Source
This commit is contained in:
Quincy Morgan
2020-09-18 11:20:53 -04:00
parent 6f2a746440
commit 72c5afb27d
2 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+31 -23
View File
@@ -3198,6 +3198,9 @@ div.full-screen > button:focus {
display: flex;
flex-flow: row nowrap;
cursor: pointer;
text-align: initial;
background: none;
font-weight: initial;
}
.issue-text .issue-icon {
@@ -3296,19 +3299,19 @@ button.autofix.action.active {
color: #f90;
}
.issue.severity-warning .issue-fix-item.actionable,
.issue.severity-warning .issue-fix-item button.actionable,
.issue-container.active .issue.severity-warning .issue-info-button {
color: #b15500;
fill: #b15500;
}
.warnings-list .issue.severity-warning .issue-label:active,
.warnings-list .issue.severity-warning .issue-label:focus,
.issue.severity-warning .issue-fix-item.actionable:active,
.issue.severity-warning .issue-fix-item.actionable:focus {
.issue.severity-warning .issue-fix-item button.actionable:active,
.issue.severity-warning .issue-fix-item button.actionable:focus {
background: #ff8;
}
.issue.severity-warning .issue-fix-item.actionable:active,
.issue.severity-warning .issue-fix-item.actionable:focus,
.issue.severity-warning .issue-fix-item button.actionable:active,
.issue.severity-warning .issue-fix-item button.actionable:focus,
.issue-container.active .issue.severity-warning .issue-info-button:active,
.issue-container.active .issue.severity-warning .issue-info-button:focus {
color: #7f3d00;
@@ -3316,10 +3319,10 @@ button.autofix.action.active {
}
@media (hover: hover) {
.warnings-list .issue.severity-warning .issue-label:hover,
.issue.severity-warning .issue-fix-item.actionable:hover {
.issue.severity-warning .issue-fix-item button.actionable:hover {
background: #ff8;
}
.issue.severity-warning .issue-fix-item.actionable:hover,
.issue.severity-warning .issue-fix-item button.actionable:hover,
.issue-container.active .issue.severity-warning .issue-info-button:hover {
color: #7f3d00;
fill: #7f3d00;
@@ -3345,7 +3348,7 @@ button.autofix.action.active {
background: #ffc6c6;
}
.issue.severity-error .issue-fix-item.actionable,
.issue.severity-error .issue-fix-item button.actionable,
.issue-container.active .issue.severity-error .issue-info-button {
color: #b91201;
fill: #b91201;
@@ -3355,12 +3358,12 @@ button.autofix.action.active {
}
.errors-list .issue.severity-error .issue-label:active,
.errors-list .issue.severity-error .issue-label:focus,
.issue.severity-error .issue-fix-item.actionable:active,
.issue.severity-error .issue-fix-item.actionable:focus {
.issue.severity-error .issue-fix-item button.actionable:active,
.issue.severity-error .issue-fix-item button.actionable:focus {
background: #ffb6b6;
}
.issue.severity-error .issue-fix-item.actionable:active,
.issue.severity-error .issue-fix-item.actionable:focus,
.issue.severity-error .issue-fix-item button.actionable:active,
.issue.severity-error .issue-fix-item button.actionable:focus,
.issue-container.active .issue.severity-error .issue-info-button:active,
.issue-container.active .issue.severity-error .issue-info-button:focus {
color: #840c00;
@@ -3368,10 +3371,10 @@ button.autofix.action.active {
}
@media (hover: hover) {
.errors-list .issue.severity-error .issue-label:hover,
.issue.severity-error .issue-fix-item.actionable:hover {
.issue.severity-error .issue-fix-item button.actionable:hover {
background: #ffb6b6;
}
.issue.severity-error .issue-fix-item.actionable:hover,
.issue.severity-error .issue-fix-item button.actionable:hover,
.issue-container.active .issue.severity-error .issue-info-button:hover {
color: #840c00;
fill: #840c00;
@@ -3469,7 +3472,7 @@ input.square-degrees-input {
padding-left: 10px;
}
.section-entity-issues .issue-container.active .issue-label .issue-text {
.section-entity-issues .issue-container.active .issue-label button.issue-text {
font-weight: bold;
}
.section-entity-issues .issue-container:not(:last-of-type) {
@@ -3491,27 +3494,32 @@ input.square-degrees-input {
display: none;
}
li.issue-fix-item {
li.issue-fix-item button {
padding: 2px 10px 2px 20px;
background: transparent;
width: 100%;
text-align: initial;
font-weight: initial;
}
.ideditor[dir='rtl'] li.issue-fix-item {
.ideditor[dir='rtl'] li.issue-fix-item button {
padding: 2px 20px 2px 10px;
}
li.issue-fix-item:first-of-type {
li.issue-fix-item:first-of-type button {
padding-top: 5px;
}
li.issue-fix-item:last-of-type {
li.issue-fix-item:last-of-type button {
padding-bottom: 5px;
}
li.issue-fix-item .fix-message {
li.issue-fix-item button .fix-message {
padding: 0 10px;
vertical-align: middle;
}
li.issue-fix-item.actionable {
li.issue-fix-item button.actionable {
cursor: pointer;
}
li.issue-fix-item:not(.actionable) .fix-icon {
li.issue-fix-item button:not(.actionable) .fix-icon {
color: #555;
fill: #555;
}
@@ -3963,7 +3971,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
.inspector-hover .section-entity-issues .issue-container.active .issue-label {
border-bottom: 0;
}
.inspector-hover .section-entity-issues .issue-container.active .issue-label .issue-text {
.inspector-hover .section-entity-issues .issue-container .issue-label button.issue-text {
font-weight: normal;
}
modules/ui/sections/entity_issues.js
+18 -15
View File
@@ -79,7 +79,11 @@ export function uiSectionEntityIssues(context) {
var labelsEnter = itemsEnter
.append('div')
.attr('class', 'issue-label')
.attr('class', 'issue-label');
var textEnter = labelsEnter
.append('button')
.attr('class', 'issue-text')
.on('click', function(d) {
makeActiveIssue(d.id); // expand only the clicked item
@@ -91,17 +95,11 @@ export function uiSectionEntityIssues(context) {
}
});
var textEnter = labelsEnter
.append('span')
.attr('class', 'issue-text');
textEnter
.append('span')
.attr('class', 'issue-icon')
.each(function(d) {
var iconName = '#iD-icon-' + (d.severity === 'warning' ? 'alert' : 'error');
d3_select(this)
.call(svgIcon(iconName));
.call(svgIcon(iconName, 'issue-icon'));
});
textEnter
@@ -188,10 +186,13 @@ export function uiSectionEntityIssues(context) {
var fixesEnter = fixes.enter()
.append('li')
.attr('class', 'issue-fix-item')
.attr('class', 'issue-fix-item');
var buttons = fixesEnter
.append('button')
.on('click', function(d) {
// not all fixes are actionable
if (!d3_select(this).classed('actionable') || !d.onClick) return;
if (d3_select(this).attr('disabled') || !d.onClick) return;
// Don't run another fix for this issue within a second of running one
// (Necessary for "Select a feature type" fix. Most fixes should only ever run once)
@@ -220,26 +221,28 @@ export function uiSectionEntityIssues(context) {
utilHighlightEntities(d.entityIds, false, context);
});
fixesEnter
.append('span')
.attr('class', 'fix-icon')
buttons
.each(function(d) {
var iconName = d.icon || 'iD-icon-wrench';
if (iconName.startsWith('maki')) {
iconName += '-15';
}
d3_select(this).call(svgIcon('#' + iconName));
d3_select(this).call(svgIcon('#' + iconName, 'fix-icon'));
});
fixesEnter
buttons
.append('span')
.attr('class', 'fix-message')
.text(function(d) { return d.title; });
fixesEnter.merge(fixes)
.selectAll('button')
.classed('actionable', function(d) {
return d.onClick;
})
.attr('disabled', function(d) {
return d.onClick ? null : 'true';
})
.attr('title', function(d) {
if (d.disabledReason) {
return d.disabledReason;