@@ -13,3 +13,75 @@ add_task(async function about_firefoxview_smoke_test() {
1313 ok ( document . querySelector ( "named-deck" ) , "named-deck element exists" ) ;
1414 } ) ;
1515} ) ;
16+
17+ add_task ( async function test_aria_roles ( ) {
18+ await withFirefoxView ( { } , async browser => {
19+ const { document } = browser . contentWindow ;
20+ is ( document . location . href , "about:firefoxview" ) ;
21+
22+ is (
23+ document . querySelector ( "main" ) . getAttribute ( "role" ) ,
24+ "application" ,
25+ "The main element has role='application'"
26+ ) ;
27+ // Purge session history to ensure recently closed empty state is shown
28+ Services . obs . notifyObservers ( null , "browser:purge-session-history" ) ;
29+ let recentlyClosedComponent = document . querySelector (
30+ "view-recentlyclosed[slot=recentlyclosed]"
31+ ) ;
32+ await TestUtils . waitForCondition (
33+ ( ) => recentlyClosedComponent . fullyUpdated
34+ ) ;
35+ let recentlyClosedEmptyState = recentlyClosedComponent . emptyState ;
36+ let descriptionEls = recentlyClosedEmptyState . descriptionEls ;
37+ is (
38+ descriptionEls [ 1 ] . querySelector ( "a" ) . getAttribute ( "aria-details" ) ,
39+ "card-container" ,
40+ "The link within the recently closed empty state has the expected 'aria-details' attribute."
41+ ) ;
42+
43+ let syncedTabsComponent = document . querySelector (
44+ "view-syncedtabs[slot=syncedtabs]"
45+ ) ;
46+ let syncedTabsEmptyState = syncedTabsComponent . emptyState ;
47+ is (
48+ syncedTabsEmptyState . querySelector ( "button" ) . getAttribute ( "aria-details" ) ,
49+ "empty-container" ,
50+ "The button within the synced tabs empty state has the expected 'aria-details' attribute."
51+ ) ;
52+
53+ // Test keyboard navigation from card-container summary
54+ // elements to links/buttons in empty states
55+ const tab = async shiftKey => {
56+ info ( `Tab${ shiftKey ? " + Shift" : "" } ) ;
57+ EventUtils . synthesizeKey ( "KEY_Tab" , { shiftKey } ) ;
58+ } ;
59+ recentlyClosedComponent . cardEl . summaryEl . focus ( ) ;
60+ ok (
61+ recentlyClosedComponent . cardEl . summaryEl . matches ( ":focus" ) ,
62+ "Focus should be on the summary element within the recently closed card-container"
63+ ) ;
64+ // Purge session history to ensure recently closed empty state is shown
65+ Services . obs . notifyObservers ( null , "browser:purge-session-history" ) ;
66+ await TestUtils . waitForCondition (
67+ ( ) => recentlyClosedComponent . fullyUpdated
68+ ) ;
69+ await tab ( ) ;
70+ ok (
71+ descriptionEls [ 1 ] . querySelector ( "a" ) . matches ( ":focus" ) ,
72+ "Focus should be on the link within the recently closed empty state"
73+ ) ;
74+ await tab ( ) ;
75+ const shadowRoot =
76+ SpecialPowers . wrap ( syncedTabsComponent ) . openOrClosedShadowRoot ;
77+ ok (
78+ shadowRoot . querySelector ( "card-container" ) . summaryEl . matches ( ":focus" ) ,
79+ "Focus should be on summary element of the synced tabs card-container"
80+ ) ;
81+ await tab ( ) ;
82+ ok (
83+ syncedTabsEmptyState . querySelector ( "button" ) . matches ( ":focus" ) ,
84+ "Focus should be on button element of the synced tabs empty state"
85+ ) ;
86+ } ) ;
87+ } ) ;
0 commit comments