Improved GameView. Change the SplashScreen to add other languages

- Use a VisualElement with image and text for the Success pill to support localization
- Ensure that we do not create nodes for an ignored accessible element and its children
- Top-Align cards
- Fixed StackView not displaying its content in the Builder on start or UI rebuild

Author: alexandredzi

Assets/Resources/UITk/MainView.uxml

@@ -3,8 +3,10 @@
     <ui:VisualElement name="root" style="flex-grow: 1;">
         <ui:VisualElement name="background" style="flex-grow: 1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgb(11, 163, 109);"/>
         <ui:VisualElement name="viewContainer" style="flex-grow: 1;">
-            <Unity.Samples.LetterSpell.StackView name="stackView" index="2" style="flex-grow: 1;">
-                <ui:VisualElement name="splashView" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/UI/Images/Splash-Screen.png?fileID=4602334432413793429&amp;guid=364b68ded9ed04f07848b6c7de25fdad&amp;type=3#Intro Screen_0&quot;);"/>
+            <Unity.Samples.LetterSpell.StackView name="stackView" index="0" style="flex-grow: 1;">
+                <ui:VisualElement name="splashView" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/UI/Images/Splash-Screen.png?fileID=4602334432413793429&amp;guid=364b68ded9ed04f07848b6c7de25fdad&amp;type=3#Intro Screen_0&quot;);">
+                    <ui:Label text="A fun spelling game" name="splashSubTitle"/>
+                </ui:VisualElement>
                 <ui:VisualElement name="loginView" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/UI/Images/Background-Intro.png?fileID=2800000&amp;guid=718087ba784b64abd9675b1452fc0095&amp;type=3#Background-Intro&quot;); align-items: center; justify-content: center;">
                     <ui:VisualElement name="logo" class="lsp-logo"/>
                     <ui:Label text="What is your name?" class="title-text"/>
@@ -16,7 +18,8 @@
                     <ui:Button text="Next" name="loginButton" class="purple"/>
                 </ui:VisualElement>
                 <ui:VisualElement name="levelChoiceView" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/UI/Images/Background-Intro.png?fileID=2800000&amp;guid=718087ba784b64abd9675b1452fc0095&amp;type=3#Background-Intro&quot;);">
-                    <ui:VisualElement name="logo" class="lsp-logo"/>                    <ui:VisualElement style="flex-grow: 1; justify-content: center; align-items: center;">
+                    <ui:VisualElement name="logo" class="lsp-logo"/>
+                    <ui:VisualElement style="flex-grow: 1; justify-content: center; align-items: center;">
                         <ui:VisualElement name="choiceButtonContainer" class="choice-button-container">
                             <ui:Button text="Play Easy" name="easyButton" class="choice-button"/>
                             <ui:Button text="Play Hard" name="hardButton" class="choice-button"/>
@@ -29,7 +32,13 @@
                 </ui:VisualElement>
                 <ui:VisualElement name="gameView" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/UI/Images/Background-Intro.png?fileID=2800000&amp;guid=718087ba784b64abd9675b1452fc0095&amp;type=3#Background-Intro&quot;);">
                     <ui:VisualElement name="logo" class="lsp-logo"/>
-                    <ui:Label text="#clue" name="clueLabel" class="title-text" style="-unity-text-align: middle-center; margin-top: 170px; margin-bottom: 50px;"/>
+                    <ui:VisualElement name="clueContainer">
+                        <ui:Label text="#clue" name="clueLabel" class="title-text" style="-unity-text-align: middle-center;"/>
+                        <ui:VisualElement name="successPill">
+                            <ui:VisualElement name="successPillCheckmark"/>
+                            <ui:Label text="Correct" class="success-pill__label"/>
+                        </ui:VisualElement>
+                    </ui:VisualElement>
                     <Unity.Samples.LetterSpell.CardListView name="letterCardContainer" style="flex-grow: 1;"/>
                     <ui:VisualElement name="gameViewButtonContainer" style="flex-direction: row; padding-top: 4px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px;">
                         <ui:Button text="" name="pauseGameButton">
@@ -39,9 +48,6 @@
                         <ui:VisualElement name="VisualElement" style="flex-grow: 1;"/>
                         <ui:Button text="Next Word" name="nextWordButton" class="purple"/>
                     </ui:VisualElement>
-                    <ui:VisualElement name="successImage" picking-mode="Ignore" style="flex-grow: 1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; align-items: center; justify-content: center; transition-property: opacity; transition-duration: 400ms; transition-timing-function: ease-in-out;">
-                        <ui:VisualElement style="background-image: url(&quot;project://database/Assets/UI/Images/Image-Correct.png?fileID=-3206192116628772432&amp;guid=7480bb21c642e4319b9a422353096177&amp;type=3#Correct-Badge_0&quot;); width: 382px; height: 85px; margin-top: -277px;"/>
-                    </ui:VisualElement>
                 </ui:VisualElement>
                 <ui:VisualElement name="settingsView" style="flex-grow: 1; background-color: rgb(255, 251, 233);">
                     <ui:VisualElement name="settingsHeader" style="flex-direction: row; flex-shrink: 0;">

Assets/Resources/UITk/Themes/LetterSpellTheme.uss

@@ -26,10 +26,6 @@
 .unity-button:hover {
     background-color: rgb(220, 180, 0);
 }
-/*
-:root {
-    font-size: 64px;
-}*/
 
 .unity-label {
 }
@@ -94,7 +90,6 @@
 }
 
 .choice-button {
-    /*font-size: 75px;*/
     padding-top: 140px;
     padding-right: 100px;
     padding-bottom: 140px;
@@ -120,7 +115,6 @@
     border-right-width: 10px;
     border-bottom-width: 10px;
     border-left-width: 10px;
-    /*font-size: 130px;*/
     width: 208px;
     height: 208px;
     border-top-left-radius: 30px;
@@ -530,12 +524,60 @@
     margin-left: 80px;
 }
 
-
 .lsp-stack-view-Transition {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #02C584;
-}
+    background-color: rgb(2, 197, 132);
+}
+
+#splashSubTitle {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    -unity-text-align: upper-center;
+    margin-top: 70px;
+    color: rgb(255, 255, 255);
+}
+
+#successPill {
+    background-color: rgb(255, 255, 255);
+    border-top-left-radius: 38px;
+    border-top-right-radius: 38px;
+    border-bottom-right-radius: 38px;
+    border-bottom-left-radius: 38px;
+    padding-right: 38px;
+    padding-left: 38px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    -unity-font-definition: url("project://database/Assets/UI/Fonts/Inter-SemiBold.ttf?fileID=12800000&guid=3b458681b475c476ea29f3244c5c85da&type=3#Inter-SemiBold");
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#successPillCheckmark {
+    width: 52px;
+    height: 47px;
+    background-image: url("project://database/Assets/UI/Images/Success-Check.png?fileID=2800000&guid=8eb6e6371b15149a7b6e3cd6117749c1&type=3#Success-Check");
+    margin-right: 15px;
+}
+
+.success-pill__label {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#clueContainer {
+    align-items: center;
+    padding-top: 168px;
+    padding-bottom: 30px;
+}
+
+#clueLabel {
+}

Assets/Scripts/Closed Captions/SubtitleViewer.cs

@@ -1,3 +1,4 @@
+using Unity.Samples.ScreenReader;
 using UnityEngine;
 using UnityEngine.UIElements;
 
@@ -148,7 +149,7 @@ void UpdateRootVisualElement()
                 {
                     CreateSubtitleView();
                 }
-
+                m_CachedRootVisualElement.GetOrCreateAccessibleProperties().ignored = true;
                 m_CachedRootVisualElement.Add(m_SubtitleView);
             }
         }

Assets/Scripts/Screen Reader/UITk/Handlers/TextFieldHandler.cs

@@ -1,3 +1,4 @@
+using UnityEngine.Accessibility;
 using UnityEngine.Scripting;
 using UnityEngine.UIElements;
 
@@ -6,6 +7,11 @@ namespace Unity.Samples.ScreenReader
     [Preserve]
     class TextFieldFieldHandler : BaseFieldHandler<string>
     {
+        public override AccessibilityRole GetRole()
+        {
+            return AccessibilityRole.TextField;
+        }
+
         public TextFieldFieldHandler()
         {
             OnSelect += () =>

Assets/Scripts/Screen Reader/UITk/VisualTreeAccessibilityUpdater.cs

@@ -580,9 +580,7 @@ void UpdateAccessibilityHierarchyRecursively(VisualElement element,
             {
                 accElement = CreateHandler(element, parentAccessible);
             }
-
-            if (element.ClassListContains(GenericDropdownMenu.ussClassName))
-                OnScreenDebug.Log("Menu " + element.name + " visible:" + visible + " acc:" +  (accElement != null) + " model " + accElement?.isModal);
+            
             bool shouldBeIgnored = !visible;
             bool modal = false;
 
@@ -635,9 +633,11 @@ void UpdateAccessibilityHierarchyRecursively(VisualElement element,
                 currentModalElement = null;
             }
 
+            // Note that we still travers the children even if the parent is ignored.
+            // It is possible that nodes for children were created and has to be destroyed and the handlers cleaned up.
             foreach (var child in element.hierarchy.Children())
             {
-                UpdateAccessibilityHierarchyRecursively(child, parentAccessible, forced, visible);
+                UpdateAccessibilityHierarchyRecursively(child, parentAccessible, forced, visible && !shouldBeIgnored);
             }
         }
 

Assets/Scripts/UITk/Card.cs

@@ -561,7 +561,7 @@ public void DoLayout()
                 child.style.left = startX + i * cardSize + (i + 1) *spacing;
                 child.style.width = cardSize;
                 child.style.height = cardSize;
-                child.style.top = (layout.height - cardSize)/2;
+                child.style.top = 0;//DONT CENTER ANYMORE, (layout.height - cardSize)/2;
                 i++;
 
             }

Assets/Scripts/UITk/Controls/Popup.cs

@@ -45,6 +45,7 @@ public PopupOverlay()
                 style.backgroundColor = new Color(0, 0, 0, 0.7f);
 
                 m_ContentContainer = new PopupContent();
+                m_ContentContainer.GetOrCreateAccessibleProperties().modal = true;
                 hierarchy.Add(m_ContentContainer);
 
                 var styleSheet = Resources.Load<StyleSheet>("UITk/Themes/LetterSpellTheme");
@@ -62,12 +63,11 @@ void OnPointerDown(PointerDownEvent evt)
             }
         }
 
-        class PopupContent : AccessibleVisualElement
+        class PopupContent : VisualElement
         {
             public PopupContent()
             {
                 AddToClassList("lsp-popup");
-                accessible.modal = true;
             }
         }
 

Assets/Scripts/UITk/Controls/StackView.cs

@@ -16,21 +16,49 @@ public partial class StackView : VisualElement
 
         public override VisualElement contentContainer => m_ContentContainer;
 
+        int m_Index = -1;
+        
         [UxmlAttribute]
         public int index
         {
-            get => m_ActiveView != null ? IndexOf(m_ActiveView) : -1;
+            get => m_Index;
             set
             {
-                if (value > this.childCount - 1)
+                if (m_Index == value)
                     return;
-                activeView = value >= 0 ? this[value] : null;
+                
+                m_Index = value;
+                UpdateActiveViewFromIndex();
+                indexChanged?.Invoke(m_Index);
             }
         }
+        
+        void UpdateActiveViewFromIndex()
+        {
+            if (m_Index < 0 || m_Index >= childCount)
+            {
+                activeView = null;
+                return;
+            }
+            activeView = this[m_Index];
+        }
 
         public VisualElement activeView
         {
-            get => m_ActiveView;
+            get
+            {
+                // Ensure the active view is valid. This is because children can be added/removed without being notified.
+                bool needToEnsureValid = false;
+                
+                if (m_ActiveView == null && m_Index != -1 && childCount > 0)
+                    needToEnsureValid = true;
+                else if (m_ActiveView != null && (!Contains(m_ActiveView) || IndexOf(m_ActiveView) != m_Index))
+                    needToEnsureValid = true;
+                
+                if (needToEnsureValid)
+                    UpdateActiveViewFromIndex();
+                return m_ActiveView;
+            }
             set
             {
                 var oldView = m_ActiveView;
@@ -44,10 +72,12 @@ public VisualElement activeView
                 else
                     UpdateViews();
 
+                index = IndexOf(m_ActiveView);
                 activeViewChanged?.Invoke();
             }
         }
 
+        public event Action<int> indexChanged;
         public event Action activeViewChanged;
 
         public StackView()
@@ -58,7 +88,7 @@ public StackView()
             m_ContentContainer.AddToClassList("lsp-stack-view__content-container");
             m_ContentContainer.style.flexGrow = 1;
             hierarchy.Add(m_ContentContainer);
-            RegisterCallback<GeometryChangedEvent>((e)=>UpdateViews());
+            RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);
         }
 
         void StartTransition(VisualElement from, VisualElement to)
@@ -100,8 +130,21 @@ void StartTransition(VisualElement from, VisualElement to)
             };
         }
 
+        bool firstGeometryChange = true;
+        
+        void OnGeometryChanged(GeometryChangedEvent evt)
+        {
+            if (firstGeometryChange )
+            {
+                firstGeometryChange = false;
+                UpdateViews();
+                UnregisterCallback<GeometryChangedEvent>(OnGeometryChanged);
+            }
+        }
+        
         public void UpdateViews()
         {
+            UpdateActiveViewFromIndex();
             foreach (var view in Children())
             {
                 if (m_ActiveView != view)

Assets/Scripts/UITk/MainView.cs

@@ -194,7 +194,7 @@ class MainView : MonoBehaviour
 
         private VisualElement m_GameView;
         private Label m_ClueLabel;
-        private VisualElement m_SuccessImage;
+        private VisualElement m_SuccessPill;
         private CardListView m_LetterCardContainer;
         private Button m_PauseGameButton;
         private Button m_NextWordButtton;
@@ -289,6 +289,8 @@ void SetupUI()
             //m_Logo.style.display = DisplayStyle.None;
             m_StackView = root.Q<StackView>();
             m_SplashView = m_StackView.Q("splashView");
+            // Disable screen reader for the label in the spash screen.
+            m_SplashView.Q<Label>().GetOrCreateAccessibleProperties().ignored = true;
             m_LoginView = m_StackView.Q("loginView");
             m_LoginView.dataSource = m_PlayerSettings;
             m_LoginButton = m_LoginView.Q<Button>("loginButton");
@@ -305,9 +307,10 @@ void SetupUI()
 
             m_GameView = m_StackView.Q("gameView");
             m_ClueLabel = m_GameView.Q<Label>("clueLabel");
-            m_SuccessImage = m_GameView.Q("successImage");
+            m_SuccessPill = m_GameView.Q("successPill");
+            m_SuccessPill.GetOrCreateAccessibleProperties().ignored = true;
             //m_SuccessImage.style.display = DisplayStyle.None;
-            m_SuccessImage.style.opacity = 0;
+            m_SuccessPill.style.opacity = 0;
             m_LetterCardContainer = m_GameView.Q<LetterSpell.CardListView>("letterCardContainer");
             m_PauseGameButton = m_GameView.Q<Button>("pauseGameButton");
             m_PauseGameButton.clicked += ShowExitGamePopup;
@@ -410,7 +413,7 @@ void OnGameStateChanged(Gameplay.State state)
         public void ShowNextWord()
         {
             //m_SuccessImage.style.display = DisplayStyle.None;
-            m_SuccessImage.style.opacity = 0;
+            m_SuccessPill.style.opacity = 0;
             //if (gameplay.IsGameComplete())
             if (gameplay.IsShowingLastWord())
             {
@@ -535,7 +538,7 @@ public void OnWordReorderingCompleted()
 
         void FadeSuccessImageIn()
         {
-            m_SuccessImage.style.opacity = 1;
+            m_SuccessPill.style.opacity = 1;
            // m_SuccessImage.style.display = DisplayStyle.Flex;
             m_MainView.schedule.Execute((t) => FadeSuccessImageOut()).ExecuteLater(3000);
         }