locked
Does Xamarin.Forms.WebView respect TabIndex on UWP? RRS feed

  • Question

  • User89714 posted

    It appears that WebView is not respecting TabIndex on UWP. Could somebody check the following for me please?

    In the following, when an instance of TestWebViewTabIndexPageView is pushed onto the NavigationStack, it shows a page with a Button, a WebView and then another Button. The TabIndex values are set such that tabbing is intended to go through the Button, WebView and Button in that order. However, using XF 4.8 on UWP, I am finding that the tabbing goes Button, Button, WebView rather than Button, WebView, Button. Could somebody confirm that please?

    (there's also the question of where the following three tabs go too, but that's an old question that I first raised in the days of Bugzilla. Still haven't had an answer to that...)

    ``` using Xamarin.Forms;

    using System.Threading.Tasks;

    namespace ViewsUsingXamarinForms { public class TestWebViewTabIndexPageView : ContentPage { private bool _firstTimeOnAppearing = true;

        public TestWebViewTabIndexPageView()
        {
            PopulatePage();
        }
    
        protected override void OnAppearing()
        {
            base.OnAppearing();
    
            if (_firstTimeOnAppearing)
            {
                _firstTimeOnAppearing = false;
    
                //PopulatePage();
    
                // The following is just here as a convenience.
                // It's a nasty, hacky way of setting the initial focus, 
                // that introduces a race condition. Good enough for
                // this repro sample though.
                Task.Run(async () =>
                {
                    await Task.Delay(1000);
                    Xamarin.Essentials.MainThread.BeginInvokeOnMainThread(() =>
                    {
                        if (_button1 != null)
                            _button1.Focus();
                    });
                });
            }
        }
    
        private Button _button1;
        private Button _button2;
        private WebView _webView;
    
        private void PopulatePage()
        {
            _button1 = new Button
            {
                Text = "Button 1 (TabIndex = 1)",
                TextColor = Color.Black,
                BackgroundColor = Color.White,
                TabIndex = 1,
                VerticalOptions = LayoutOptions.Start
            };
    
            _webView = new WebView
            {
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.Fill,
                TabIndex = 2,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = new HtmlWebViewSource
                {
                    Html = "<html><body>Hello (TabIndex=2)<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29</body></html>"
                }
            };
    
            _button2 = new Button
            {
                Text = "Button 2 (TabIndex=3)",
                TextColor = Color.Black,
                BackgroundColor = Color.White,
                TabIndex = 3,
                VerticalOptions = LayoutOptions.End
            };
    
            Content = new StackLayout
            {
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
                BackgroundColor = Color.Pink,
                Children =
                {
                    _button1,
                    _webView,
                    _button2
                }
            };
        }
    }
    

    } ```

    Wednesday, October 14, 2020 9:45 PM

Answers

  • User369979 posted

    Not all the controls support TabIndex. Refer to this: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/accessibility/keyboard#supported-controls We will find the webview isn't in the supported control list. So a webview won't respect the tab index you set there.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, October 15, 2020 6:51 AM

All replies

  • User369979 posted

    Not all the controls support TabIndex. Refer to this: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/accessibility/keyboard#supported-controls We will find the webview isn't in the supported control list. So a webview won't respect the tab index you set there.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, October 15, 2020 6:51 AM
  • User89714 posted

    Thanks @LandLu. I had seen that documentation page previously, but (a) hadn't noticed that WebView was completely missing from it, and (b) had assumed that it was implying that because TabIndex is so key on Windows that UWP would be completely supported but no promises were being made for other platforms. I must remember not to make assumptions :-)

    I already have a custom WebView class and a custom renderer, so I'll see if I can quickly tweak those to implement TabIndex for my custom WebView.

    Thursday, October 15, 2020 9:08 AM
  • User89714 posted

    A bit more investigation shows that this is a limitation of UWP itself, so not something that can be fixed in a custom renderer in a XF app :-(

    To get a desired tab order involving a WebView on UWP apparently requires the XAML (or C# UI) to be constructed in the desired tab order with TabIndex values set to int.MaxValue (not the zero that Xamarin documentation says is the default value). That's a nuisance, to say the least.

    Thursday, October 15, 2020 3:08 PM