From 72c5afb27d5238310db5a6273c1a86abbc23c676 Mon Sep 17 00:00:00 2001 From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com> Date: Fri, 18 Sep 2020 11:20:53 -0400 Subject: [PATCH] Make the issues inspector section navigable with the keyboard (re: #8004) --- css/80_app.css | 54 ++++++++++++++++------------ modules/ui/sections/entity_issues.js | 33 +++++++++-------- 2 files changed, 49 insertions(+), 38 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 21b5d76b9..8405d7c2a 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -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; } diff --git a/modules/ui/sections/entity_issues.js b/modules/ui/sections/entity_issues.js index 0a403f1b9..d70ea82f6 100644 --- a/modules/ui/sections/entity_issues.js +++ b/modules/ui/sections/entity_issues.js @@ -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;