зеркало из https://github.com/DeGsoft/maui-linux.git
[Controls] Fix accessibility gallery (#763)
This commit is contained in:
Samantha Houts
Stephane Delcroix
Родитель
df913c30cb
Коммит
4464db59e5
|
|
@ -9,9 +9,19 @@ namespace Xamarin.Forms.Controls
|
|||
// https://developer.xamarin.com/guides/ios/advanced_topics/accessibility/
|
||||
// https://msdn.microsoft.com/en-us/windows/uwp/accessibility/basic-accessibility-information
|
||||
|
||||
const string EntryPlaceholder = "Your name.";
|
||||
const string EntryHint = "Type your name.";
|
||||
const string ImageName = "Roof";
|
||||
const string ImageHint = "Tap to show an alert.";
|
||||
const string BoxHint = "Shows a purple box.";
|
||||
const string BoxName = "Box";
|
||||
|
||||
string screenReader = "";
|
||||
string scrollFingers = "";
|
||||
string explore = "";
|
||||
string labeledByInstructions = "";
|
||||
string imageInstructions = "";
|
||||
string boxInstructions = "";
|
||||
|
||||
switch (Device.RuntimePlatform)
|
||||
{
|
||||
|
|
@ -19,30 +29,45 @@ namespace Xamarin.Forms.Controls
|
|||
screenReader = "VoiceOver";
|
||||
scrollFingers = "three fingers";
|
||||
explore = "Use two fingers to swipe up or down the screen to read all of the elements on this page.";
|
||||
labeledByInstructions = $"The following Entry should read aloud \"{EntryPlaceholder}.\", plus native instructions on how to use an Entry element. This text comes from the placeholder.";
|
||||
imageInstructions = $"The following Image should read aloud \"{ImageName}. {ImageHint}\". You should be able to tap the image and hear an alert box.";
|
||||
boxInstructions = $"The following Box should read aloud \"{BoxName}. {BoxHint}\". You should be able to tap the box and hear an alert box.";
|
||||
break;
|
||||
case Device.Android:
|
||||
screenReader = "TalkBack";
|
||||
scrollFingers = "two fingers";
|
||||
explore = "Drag one finger across the screen to read each element on the page.";
|
||||
labeledByInstructions = $"The following Entry should read aloud \"EditBox {EntryPlaceholder} for {EntryHint}.\", plus native instructions on how to use an Entry element. This text comes from the Entry placeholder and text of the Label.";
|
||||
imageInstructions = $"The following Image should read aloud \"{ImageName}. {ImageHint}\". You should be able to tap the image and hear an alert box.";
|
||||
boxInstructions = $"The following Box should read aloud \"{BoxName}. {BoxHint}\". You should be able to tap the box and hear an alert box.";
|
||||
break;
|
||||
case Device.Windows:
|
||||
case Device.WinPhone:
|
||||
screenReader = "Narrator";
|
||||
scrollFingers = "two fingers";
|
||||
explore = "Use three fingers to swipe up the screen to read all of the elements on this page.";
|
||||
labeledByInstructions = $"The following Entry should read aloud \"{EntryHint}\", plus native instructions on how to use an Entry element. This text comes from the text of the label.";
|
||||
imageInstructions = $"The following Image should read aloud \"{ImageName}. {ImageHint}\". Windows does not currently support TapGestures while the Narrator is active.";
|
||||
boxInstructions = $"The following Box should read aloud \"{BoxName}. {BoxHint}\". Windows does not currently support TapGestures while the Narrator is active.";
|
||||
break;
|
||||
default:
|
||||
screenReader = "the native screen reader";
|
||||
break;
|
||||
}
|
||||
|
||||
var instructions = new Label { Text = $"Please enable {screenReader}. {explore} Use {scrollFingers} to scroll the view. Tap an element once to hear the description. Double tap anywhere on the screen to activate the selected element. Swipe left or right with one finger to switch to the previous or next element." };
|
||||
var instructions = new Label { Text = $"Please enable {screenReader}. {explore} Use {scrollFingers} to scroll the view. Tap an element once to hear the name and description and native instructions. Double tap anywhere on the screen to activate the selected element. Swipe left or right with one finger to switch to the previous or next element." };
|
||||
|
||||
const string EntryPlaceholder = "Your name";
|
||||
const string EntryHint = "Type your name.";
|
||||
|
||||
var instructions2 = new Label { Text = $"The following Entry should read aloud \"{EntryPlaceholder}. {EntryHint}\", plus native instructions on how to use an entry element. Note that Android will NOT read the Hint if a Placeholder is provided." };
|
||||
var instructions2 = new Label { Text = labeledByInstructions };
|
||||
var entryLabel = new Label { Text = EntryHint, VerticalOptions = LayoutOptions.Center };
|
||||
var entry = new Entry { Placeholder = EntryPlaceholder };
|
||||
entry.SetAccessibilityHint(EntryHint);
|
||||
entry.SetAccessibilityLabeledBy(entryLabel);
|
||||
|
||||
var entryGroup = new Grid();
|
||||
entryGroup.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
|
||||
entryGroup.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
|
||||
entryGroup.AddChild(entryLabel, 0, 0);
|
||||
entryGroup.AddChild(entry, 1, 0);
|
||||
|
||||
|
||||
|
||||
var activityIndicator = new ActivityIndicator();
|
||||
|
|
@ -50,8 +75,10 @@ namespace Xamarin.Forms.Controls
|
|||
|
||||
|
||||
const string ButtonText = "Update progress";
|
||||
var instructions3 = new Label { Text = $"The following Button should read aloud \"{ButtonText}\", plus native instructions on how to use a button." };
|
||||
const string ButtonHint = "Tap to start/stop the activity indicator.";
|
||||
var instructions3 = new Label { Text = $"The following Button should read aloud \"{ButtonText}.\", plus native instructions on how to use a button." };
|
||||
var button = new Button { Text = ButtonText };
|
||||
button.SetAccessibilityHint(ButtonHint);
|
||||
button.Clicked += (sender, e) =>
|
||||
{
|
||||
activityIndicator.IsRunning = !activityIndicator.IsRunning;
|
||||
|
|
@ -59,27 +86,27 @@ namespace Xamarin.Forms.Controls
|
|||
};
|
||||
|
||||
|
||||
const string ImageHint = "Tap to show an alert.";
|
||||
var instructions4 = new Label { Text = $"The following Image should read aloud \"{ImageHint}\". You should be able to tap the image and hear an alert box." };
|
||||
var instructions4 = new Label { Text = imageInstructions };
|
||||
var image = new Image { Source = "photo.jpg" };
|
||||
// The tap gesture will NOT work on Win
|
||||
image.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(() => DisplayAlert("Success", "You tapped the image", "OK")) });
|
||||
image.SetAccessibilityName(ImageName);
|
||||
image.SetAccessibilityHint(ImageHint);
|
||||
// images are ignored by default on iOS (at least, Forms images are);
|
||||
// Images are ignored by default on iOS (at least, Forms Images are);
|
||||
// make accessible in order to enable the gesture and narration
|
||||
image.SetIsInAccessibleTree(true);
|
||||
|
||||
|
||||
var instructions5 = new Label { Text = $"The following Button should NOT be read aloud, nor should you be able to interact with it while {screenReader} is active." };
|
||||
var button2 = new Button { Text = "I am not accessible" };
|
||||
// setting this to false seems to have no effect on any platform
|
||||
button2.SetIsInAccessibleTree(false);
|
||||
|
||||
|
||||
var instructions6 = new Label { Text = boxInstructions };
|
||||
var boxView = new BoxView { Color = Color.Purple };
|
||||
// The tap gesture will NOT work on Win
|
||||
boxView.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(() => DisplayAlert("Success", "You tapped the box", "OK")) });
|
||||
boxView.SetAccessibilityName("Box");
|
||||
boxView.SetAccessibilityHint("Shows a purple box.");
|
||||
//boxView.SetIsInAccessibleTree(true);
|
||||
boxView.SetAccessibilityName(BoxName);
|
||||
boxView.SetAccessibilityHint(BoxHint);
|
||||
// BoxViews are ignored by default on iOS and Win;
|
||||
// make accessible in order to enable the gesture and narration
|
||||
boxView.SetIsInAccessibleTree(true);
|
||||
|
||||
|
||||
var stack = new StackLayout
|
||||
{
|
||||
|
|
@ -87,29 +114,21 @@ namespace Xamarin.Forms.Controls
|
|||
{
|
||||
instructions,
|
||||
instructions2,
|
||||
entry,
|
||||
entryGroup,
|
||||
instructions3,
|
||||
button,
|
||||
activityIndicator,
|
||||
instructions4,
|
||||
image,
|
||||
instructions5,
|
||||
button2,
|
||||
boxView
|
||||
}
|
||||
};
|
||||
|
||||
var scrollView = new ScrollView { Content = stack };
|
||||
|
||||
// TODO: Test Pan/Pinch gestures
|
||||
// TODO: Test CarouselView
|
||||
|
||||
Content = scrollView;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
public static class AccessibilityExtensions
|
||||
{
|
||||
public static void SetAccessibilityName(this VisualElement element, string name)
|
||||
|
|
@ -141,5 +160,15 @@ namespace Xamarin.Forms.Controls
|
|||
{
|
||||
return (bool)element.GetValue(Accessibility.IsInAccessibleTreeProperty);
|
||||
}
|
||||
|
||||
public static void SetAccessibilityLabeledBy(this VisualElement element, Element value)
|
||||
{
|
||||
element.SetValue(Accessibility.LabeledByProperty, value);
|
||||
}
|
||||
|
||||
public static Element GetAccessibilityLabeledBy(this VisualElement element)
|
||||
{
|
||||
return (Element)element.GetValue(Accessibility.LabeledByProperty);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче