Fixed first login page not accessible. Fix some accessible label and hint.

Author: alexandredzi

Assets/Resources/UITk/MainView.uxml

@@ -9,15 +9,11 @@
                 </ui:VisualElement>
                 <ui:VisualElement name="loginView" style="flex-grow: 1; align-items: center; justify-content: center;">
                     <ui:VisualElement name="logo" class="lsp-logo"/>
-                    <ui:Label class="title-text">
-                        <Bindings>
-                            <UnityEngine.Localization.LocalizedString property="text" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(405763420160)"/>
-                        </Bindings>
-                    </ui:Label>
-                    <ui:TextField placeholder-text="Enter your name" name="TextField" style="flex-direction: column; min-width: 252px; width: 949px;">
+                    <ui:TextField placeholder-text="Enter your name" name="loginNameField" label="What is your name?" style="min-width: 252px; width: 949px;">
                         <Bindings>
                             <ui:DataBinding property="value" data-source-path="userName" binding-mode="TwoWay"/>
                             <UnityEngine.Localization.LocalizedString property="placeholderText" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(775025750016)"/>
+                            <UnityEngine.Localization.LocalizedString property="label" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(405763420160)"/>
                         </Bindings>
                     </ui:TextField>
                     <ui:Button name="loginButton" class="purple">

Assets/Resources/UITk/Themes/LetterSpellTheme.uss

@@ -136,6 +136,10 @@
     rotate: -15deg;
 }
 
+.lsp-letter-card:focus {
+    border-bottom-color: rgb(255, 0, 0);
+}
+
 .lsp-letter-card__button-container {
     position: absolute;
     top: 100%;
@@ -581,3 +585,14 @@
 
 #clueLabel {
 }
+
+#loginNameField {
+    flex-direction: column;
+}
+
+#loginNameField .unity-base-field__label {
+    -unity-text-align: middle-center;
+    color: rgb(255, 255, 255);
+    -unity-font-definition: url("project://database/Assets/UI/Fonts/Inter-SemiBold.ttf?fileID=12800000&guid=3b458681b475c476ea29f3244c5c85da&type=3#Inter-SemiBold");
+    margin-bottom: 30px;
+}

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

@@ -10,6 +10,12 @@ class DropdownFieldHandler : BaseFieldHandler<string>
     {
         bool m_HasPendingCheck;
 
+        
+        public override string GetHint()
+        {
+            return "Double tap to expand";
+        }
+        
         protected override void BindToElement(VisualElement element)
         {
             base.BindToElement(element);

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

@@ -7,6 +7,15 @@ namespace Unity.Samples.ScreenReader
     [Preserve]
     class TextFieldFieldHandler : BaseFieldHandler<string>
     {
+        public override string GetValue()
+        {
+            var textField = ownerElement as TextField;
+            
+            if (string.IsNullOrEmpty(textField.value))
+                return ownerElement is TextField tf ? tf.textEdition.placeholder : textField.value;
+            return base.GetValue();
+        }
+        
         public override AccessibilityRole GetRole()
         {
             return AccessibilityRole.TextField;

Assets/Scripts/UITk/Card.cs

@@ -5,11 +5,12 @@
 using UnityEngine.Scripting;
 using UnityEngine.UIElements;
 using Unity.Samples.ScreenReader;
+using UnityEditor;
 using Button = UnityEngine.UIElements.Button;
 
 namespace Unity.Samples.LetterSpell
 {
-    class UITkLetterCard : VisualElement
+    class UITkLetterCard : AccessibleVisualElement
     {
         Label m_TextElement;
         Vector2 m_Start;
@@ -27,86 +28,75 @@ class UITkLetterCard : VisualElement
         //     public override string GetLabel() => (owner as UITkLetterCard).text;
         // }
 
-       public bool selected => cardListView?.selectedCard == this;
+        private bool m_Selected;
 
-        public string text
+        public bool selected
         {
-            get => m_TextElement.text;
-            set => m_TextElement.text = value;
+            get => m_Selected;
+            set
+            {
+                if (m_Selected == value)
+                    return;
+                m_Selected = value;
+                if (value)
+                    Focus();
+                UpdateSelectedState();
+            }
         }
 
-        public event Action<int, int> dropped;
-
-        [RegisterAccessibilityHandler(typeof(UITkLetterCard))]
-        [Preserve]
-        class AccessibleLetterCardHandler : VisualElementAccessibilityHandler
+        void UpdateSelectedState()
         {
-            UITkLetterCard card => ownerElement as UITkLetterCard;
-
-            public override string GetLabel() => card.text;
-
-            protected override void BindToElement(VisualElement ve)
-            {
-                card.m_TextElement.GetOrCreateAccessibleProperties().ignored = true;
-            }
+            EnableInClassList("selected", selected);
+        }
 
-            public AccessibleLetterCardHandler()
+        public string text
+        {
+            get => m_TextElement.text;
+            set
             {
-                OnSelect += () =>
-                {
-                    var letter = ownerElement as UITkLetterCard;
-
-                    if (!letter.selected)
-                    {
-                        letter.Select();
-                    }
-                    else
-                    {
-                        letter.Unselect();
-                    }
-
-                    return true;
-                };
+                m_TextElement.text = value;
+                accessible.label = value;
             }
         }
 
+        public event Action<int, int> dropped;
+        
         public void Select()
         {
-            cardListView.selectedCard = this;
-            OnScreenDebug.Log("Selected card: " + text);
+            if (cardListView.selectedCard != this)
+            {
+                cardListView.selectedCard = this;
+                
+                // check whether we are focused or not
+                var focused = this.focusController?.focusedElement == this;
+ 
+                AssistiveSupport.notificationDispatcher.SendAnnouncement($"Card {text} selected. Swipe Left or Right to move the card." + (focused ? "Or Double tap to unselect it." : ""));
+   
+                OnScreenDebug.Log("Selected card: " + text);
+            }
         }
 
         public void Unselect()
         {
             if (this == cardListView.selectedCard)
             {
-                cardListView.selectedCard = null;
+                // check whether we are focused or not
+                var focused = this.focusController?.focusedElement == this;
+                cardListView.selectedCard = null; 
+                
+                AssistiveSupport.notificationDispatcher.SendAnnouncement($"Card {text} selected. Swipe Left or Right to move the card." + (focused ? "Or Double tap to unselect it." : ""));
+
             }
         }
+        
         public UITkLetterCard()
         {
             m_TextElement = new Label();
             Add(m_TextElement);
             AddToClassList("lsp-letter-card");
             AddToClassList("lsp-card-view-item");
-
-            // style.transitionProperty = new StyleList<StylePropertyName>(new List<StylePropertyName>{ new StylePropertyName("left")});
-            // style.transitionDuration = new StyleList<TimeValue>(new List<TimeValue>{new(0.5f)});
-            /*style.marginLeft = 4;
-            style.marginTop = 4;
-            style.marginRight = 4;
-            style.marginBottom = 4;
-            */
-            /*style.fontSize = 40;
-            style.alignItems = Align.Center;
-            style.justifyContent = Justify.Center;
-
-            style.borderBottomLeftRadius = 6;
-            style.borderTopLeftRadius = 6;
-            style.borderBottomRightRadius = 6;
-            style.borderTopRightRadius = 6;*/
-
-            // style.backgroundColor = Color.white;
+            
+            focusable = true;
 
             style.position = Position.Absolute;
 
@@ -146,6 +136,26 @@ public UITkLetterCard()
 
             RegisterCallbacksOnTarget();
             RegisterCallback<AttachToPanelEvent>(OnAttachToPanel);
+            RegisterCallback<FocusInEvent>(OnFocusIn);
+            RegisterCallback<BlurEvent>(OnBlur);
+            
+            // Accessibility
+            m_TextElement.GetOrCreateAccessibleProperties().ignored = true;
+            accessible.selected += () => 
+            {
+                if (!selected)
+                {
+                    Select();
+                    OnScreenDebug.Log("Selected card: " + text);
+                }
+                else
+                {
+                    OnScreenDebug.Log("UnSelected card: " + text);
+                    Unselect();
+                }
+
+                return true;
+            };
         }
 
         bool m_Animated;
@@ -173,6 +183,22 @@ void OnAttachToPanel(AttachToPanelEvent e)
             // TODO: FIX ANIMATION WHEN STARTING A GAME
             // schedule.Execute(() => animated = true).ExecuteLater(500);
         }
+
+        void OnFocusIn(FocusInEvent e)
+        {
+            AssistiveSupport.notificationDispatcher.SendAnnouncement($"Double tap to select Card {text} and start moving.");
+
+            OnScreenDebug.Log("OnFocusIn " + text);
+            e.StopPropagation();
+        }
+        
+        void OnBlur(BlurEvent e)
+        {
+            OnScreenDebug.Log("Un Focus " + text);
+            accessible.hint = null;
+            e.StopPropagation();
+        }
+        
         protected Rect CalculatePosition(float x, float y, float width, float height)
         {
             var rect = new Rect(x, y, width, height);
@@ -266,15 +292,6 @@ protected void OnMouseDown(MouseDownEvent e)
                 return;
             }
 
-            if (e.ctrlKey)
-            {
-                cardListView.selectedCard = cardListView.selectedCard == this ? null : this;
-            }
-            else
-            {
-                cardListView.selectedCard = this;
-            }
-
             if (m_Active)
             {
                 e.StopImmediatePropagation();
@@ -302,6 +319,8 @@ protected void OnMouseMove(MouseMoveEvent e)
         {
             if (m_Active)
             {
+                // Ensure the card is selected when we start dragging it.
+                Select();
                 var diff = e.localMousePosition - m_Start;
 
                 if (!dragging && Math.Abs(diff.x) > 5)
@@ -346,6 +365,18 @@ protected void OnMouseUp(MouseUpEvent e)
             {
                 if (e.button == (int)MouseButton.LeftMouse)
                 {
+                    // Select or unselect the card if we didn't drag it.
+                    if (!m_Dragging)
+                    {
+                        if (selected)
+                        {
+                            Unselect();
+                        }
+                        else
+                        {
+                            Select();
+                        }
+                    }
                     m_Active = false;
                     dragging = false;
 
@@ -651,10 +682,14 @@ public UITkLetterCard selectedCard
                     return;
                 }
 
-                m_SelectedCard?.RemoveFromClassList("selected");
+                if (m_SelectedCard != null)
+                    m_SelectedCard.selected = false;
+                
                 m_SelectedCard = value;
-                m_SelectedCard?.AddToClassList("selected");
-                m_SelectedCard?.UpdateButtonEnableState();
+                OnScreenDebug.Log("ListView selected card: " + (m_SelectedCard != null ? m_SelectedCard.text : "null"));
+                
+                if (m_SelectedCard != null)
+                    m_SelectedCard.selected = true;
             }
         }
 

Assets/Scripts/UITk/Controls/StackView.cs

@@ -1,4 +1,5 @@
 using System;
+using Unity.Samples.ScreenReader;
 using UnityEngine;
 using UnityEngine.UIElements;
 
@@ -68,18 +69,16 @@ public VisualElement activeView
                 }
 
                 m_ActiveView = value;
-
+                index = IndexOf(m_ActiveView);
                 if (panel != null)
                 {
                     StartTransition(oldView, m_ActiveView);
                 }
                 else
                 {
                     UpdateViews();
+                    activeViewChanged?.Invoke();
                 }
-
-                index = IndexOf(m_ActiveView);
-                activeViewChanged?.Invoke();
             }
         }
 
@@ -126,15 +125,21 @@ void StartTransition(VisualElement from, VisualElement to)
 
                         fadeOut.onAnimationCompleted += () =>
                         {
+                            activeViewChanged?.Invoke();
                         };
                     }
+                    else
+                    {
+                        activeViewChanged?.Invoke();
+                    }
                 };
             }
             else if (to != null)
             {
                 // If there is no from, just show the
                 to.style.display = DisplayStyle.Flex;
                 to.style.opacity = 1;
+                activeViewChanged?.Invoke();
             }
         }