[web] Use aria-hidden instead of inert for platform view accessibility
diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart
index 0737f82..d27c70c 100644
--- a/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart
+++ b/engine/src/flutter/lib/web_ui/lib/src/engine/platform_views/content_manager.dart
@@ -37,6 +37,9 @@
/// rendering of PlatformViews into the web app.
static PlatformViewManager instance = PlatformViewManager();
+ /// The attribute name used to hide platform views from accessibility.
+ static const String _ariaHiddenAttribute = 'aria-hidden';
+
// The factory functions, indexed by the viewType
final Map<String, Function> _factories = <String, Function>{};
@@ -119,7 +122,7 @@
/// The resulting DOM for the `contents` of a Platform View looks like this:
///
/// ```html
- /// <flt-platform-view id="flt-pv-VIEW_ID" slot="..." inert>
+ /// <flt-platform-view id="flt-pv-VIEW_ID" slot="..." aria-hidden="true">
/// <arbitrary-html-elements />
/// </flt-platform-view-slot>
/// ```
@@ -132,8 +135,8 @@
/// what `slot` tag will reveal this `contents`, **without modifying the returned
/// html from the `factory` function**.
///
- /// By default, platform views are made inert. The semantics layer will remove
- /// this when a semantic node is created.
+ /// By default, platform views are hidden from accessibility using aria-hidden.
+ /// The semantics layer will remove this when a semantic node is created.
DomElement renderContent(String viewType, int viewId, Object? params) {
assert(
knowsViewType(viewType),
@@ -161,7 +164,7 @@
_ensureContentCorrectlySized(content, viewType);
wrapper.append(content);
- wrapper.setAttribute('inert', '');
+ wrapper.setAttribute(_ariaHiddenAttribute, 'true');
return wrapper;
});
@@ -225,11 +228,9 @@
}
if (isHidden) {
- // Hide from screen readers and keyboard navigation
- wrapper.setAttribute('inert', '');
+ wrapper.setAttribute(_ariaHiddenAttribute, 'true');
} else {
- // Make accessible to screen readers and keyboard navigation
- wrapper.removeAttribute('inert');
+ wrapper.removeAttribute(_ariaHiddenAttribute);
}
}
diff --git a/engine/src/flutter/lib/web_ui/test/engine/platform_views/content_manager_test.dart b/engine/src/flutter/lib/web_ui/test/engine/platform_views/content_manager_test.dart
index 0b71936..6e7c3fd 100644
--- a/engine/src/flutter/lib/web_ui/test/engine/platform_views/content_manager_test.dart
+++ b/engine/src/flutter/lib/web_ui/test/engine/platform_views/content_manager_test.dart
@@ -248,28 +248,28 @@
contentManager.registerFactory(viewType, (int id) => createDomHTMLDivElement());
});
- test('sets inert attribute by default when rendering', () {
+ test('sets aria-hidden attribute by default when rendering', () {
final DomElement wrapper = contentManager.renderContent(viewType, viewId, null);
expect(
- wrapper.hasAttribute('inert'),
- isTrue,
- reason: 'Platform views should be inert by default for ExcludeSemantics support',
+ wrapper.getAttribute('aria-hidden'),
+ 'true',
+ reason: 'Platform views should be aria-hidden by default for ExcludeSemantics support',
);
});
test('hides platform view from accessibility when isHidden is true', () {
final DomElement wrapper = contentManager.renderContent(viewType, viewId, null);
- wrapper.removeAttribute('inert');
- expect(wrapper.hasAttribute('inert'), isFalse);
+ wrapper.removeAttribute('aria-hidden');
+ expect(wrapper.hasAttribute('aria-hidden'), isFalse);
contentManager.updatePlatformViewAccessibility(viewId, true);
expect(
- wrapper.hasAttribute('inert'),
- isTrue,
- reason: 'inert should be set when isHidden is true',
+ wrapper.getAttribute('aria-hidden'),
+ 'true',
+ reason: 'aria-hidden should be set to true when isHidden is true',
);
});
@@ -277,17 +277,17 @@
final DomElement wrapper = contentManager.renderContent(viewType, viewId, null);
expect(
- wrapper.hasAttribute('inert'),
- isTrue,
- reason: 'Platform view should start as inert',
+ wrapper.getAttribute('aria-hidden'),
+ 'true',
+ reason: 'Platform view should start with aria-hidden=true',
);
contentManager.updatePlatformViewAccessibility(viewId, false);
expect(
- wrapper.hasAttribute('inert'),
+ wrapper.hasAttribute('aria-hidden'),
isFalse,
- reason: 'inert should be removed when isHidden is false',
+ reason: 'aria-hidden should be removed when isHidden is false',
);
});
@@ -295,13 +295,13 @@
final DomElement wrapper = contentManager.renderContent(viewType, viewId, null);
contentManager.updatePlatformViewAccessibility(viewId, false);
- expect(wrapper.hasAttribute('inert'), isFalse);
+ expect(wrapper.hasAttribute('aria-hidden'), isFalse);
contentManager.updatePlatformViewAccessibility(viewId, true);
- expect(wrapper.hasAttribute('inert'), isTrue);
+ expect(wrapper.getAttribute('aria-hidden'), 'true');
contentManager.updatePlatformViewAccessibility(viewId, false);
- expect(wrapper.hasAttribute('inert'), isFalse);
+ expect(wrapper.hasAttribute('aria-hidden'), isFalse);
});
test('does nothing when viewId does not exist', () {
