[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', () {