Skip to content

Webviews don't respect accessibility.unfocusedViewOpacity #189650

New issue
New issue
Closed as not planned
Closed as not planned
Webviews don't respect accessibility.unfocusedViewOpacity#189650
Assignees
Tyriarmjbvz
Labels
*out-of-scopePosted issue is not in scope of VS CodeaccessibilityKeyboard, mouse, ARIA, vision, screen readers (non-specific) issuesbugIssue identified by VS Code Team member as probable bughelp wantedIssues identified as good community contribution opportunitieswebviewWebview issues
Milestone
Backlog
@Tyriar

Description

@Tyriar
Tyriar
opened on Aug 4, 2023

This setting works by injecting some CSS here:

vscode/src/vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution.ts

Lines 37 to 50 in 040c5df

const rules = new Set<string>();
// Only add the styles if the feature is used
if (opacity !== 1) {
const filterRule = `filter: opacity(${opacity});`;
// Terminal tabs
rules.add(`.monaco-workbench .pane-body.integrated-terminal:not(:focus-within) .tabs-container { ${filterRule} }`);
// Terminals
rules.add(`.monaco-workbench .pane-body.integrated-terminal .xterm:not(.focus) { ${filterRule} }`);
// Editors
rules.add(`.monaco-workbench .editor-instance:not(:focus-within) .monaco-editor { ${filterRule} }`);
}
elStyle.textContent = [...rules].join('\n');

Webviews aren't part of the regular DOM structure though so I'm not sure the best way to do this. I tried this but it didn't work:

[data-parent-flow-to-element-id^=webview-editor-element] .webview:not(:focus-within) {
    filter: opacity(0.5);
}

I think we need a focused class on the iframe to be able to style this from the main document.

Metadata

Metadata

Assignees

Labels

*out-of-scopePosted issue is not in scope of VS CodeaccessibilityKeyboard, mouse, ARIA, vision, screen readers (non-specific) issuesbugIssue identified by VS Code Team member as probable bughelp wantedIssues identified as good community contribution opportunitieswebviewWebview issues

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions