Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding accessibility tags to a label seems to cause the renderer to need more space #2580

Closed
raymondjstone opened this issue May 2, 2018 · 9 comments · Fixed by #4433

Comments

@raymondjstone
Copy link

commented May 2, 2018

Description

Adding accessibility tags to a label seems to cause the renderer to need more space for the label when it is in stacklayouts (Horizontal orientated ones especially). Given accessibility tags are not visible there should be no requirement for more space surely

Steps to Reproduce

  1. create a series of labels such they they use up the screen width on a horizontal stacklayout
  2. add accessibility tags to the labels

Expected Behavior

Labels should show the same with and without the tags

Actual Behavior

Labels seem to 'need' more space on the screen and affect the layour

Basic Information

  • Version with issue: all possibly, am on the current version
  • Last known good version: none
  • IDE: VS 2017 15.6.7
  • Platform Target Frameworks:4.9.0.763
    • iOS: 11.9.1.24
    • Android: 8.2.0.16
    • UWP: n/a
  • Android Support Library Version:
  • Nuget Packages:
  • Affected Devices:

Screenshots

Reproduction Link

@pauldipietro pauldipietro added this to New in Triage May 2, 2018

@hartez

This comment has been minimized.

Copy link
Member

commented May 2, 2018

Is this occurring on all platforms or a specific platform? Could you post an example layout (code or XAML) which demonstrates this?

I've tried the following layout to reproduce this problem, but both sets of labels lay out identically:

<StackLayout>

	<StackLayout Orientation="Horizontal" >

		<Label Text="Label 1" />
		<Label Text="Label 2" />
		<Label Text="Label 3" />
		<Label Text="Label 4" />
		<Label Text="Label 5" />
		<Label Text="Label 6" />
		<Label Text="Label 7" />
		<Label Text="Label 8" />

	</StackLayout>

	<StackLayout Orientation="Horizontal" >

		<Label Text="Label 1" AutomationId="label1" />
		<Label Text="Label 2" AutomationId="label2" />
		<Label Text="Label 3" AutomationId="label3" />
		<Label Text="Label 4" AutomationId="label4" />
		<Label Text="Label 5" AutomationId="label5" />
		<Label Text="Label 6" AutomationId="label6" />
		<Label Text="Label 7" AutomationId="label7" />
		<Label Text="Label 8" AutomationId="label8" />

	</StackLayout>

</StackLayout>

Am I missing a step to reproduce this?

@hartez hartez moved this from New to Needs Info in Triage May 2, 2018

@raymondjstone

This comment has been minimized.

Copy link
Author

commented May 3, 2018

You are not setting the name nor the helptext fields and I am also setting the inaccessibletree flag to true (not sure if that is the default for labels or not). I am not at work at the moment so can't post a specific example but the issue gets worse as the name or helptext fields get longer it seemed

@raymondjstone

This comment has been minimized.

Copy link
Author

commented May 3, 2018

ok, some info

Firstly I mostly test on Android (easier when using VS2017 on windows), so by the time I deploy to IOS I had fixed the issue so issue is certainly on Android but I have no reason to believe it is not on IOS as well

I am only using C# not XAML for this, and all objects go through the same code (unless data bound), labels cause issues as described above but when I switched to using images but with the exact same accessibility settings the layout was fine.

The settings used are as following (labeledby is null in these cases, and the sanitize function currently does nothing except adjust the text to correct some bad pronunciations, intree is a bool that is true, name and helptext are strings )

        AutomationProperties.SetIsInAccessibleTree(o, inTree);
        if (inTree)
        {
            AutomationProperties.SetName(o, sanitize(name));
            AutomationProperties.SetHelpText(o, sanitize(helptext));
            if (labeledby != null)
            {
                AutomationProperties.SetLabeledBy(o, labeledby);
            }
        }
@raymondjstone

This comment has been minimized.

Copy link
Author

commented May 3, 2018

oh and please note you should have something visible below the accessible stacklayout as well, that way you should see it move down further than it should be

@hartez

This comment has been minimized.

Copy link
Member

commented May 3, 2018

It looks like the problem only exists on Android, and setting AutomationProperties.HelpText and AutomationProperties.Name will trigger it. If you run the attached repro project on Android, the two rows of Labels do not line up; on the other platforms they do.

_2580 Repro.zip

@hartez hartez moved this from Needs Info to Ready For Work in Triage May 3, 2018

@raymondjstone

This comment has been minimized.

Copy link
Author

commented May 3, 2018

Thanks for the update and more accurate diagnosis

@samhouts samhouts added this to To do in Sprint 143 Oct 15, 2018

@samhouts samhouts removed this from Ready For Work in Triage Oct 15, 2018

@samhouts samhouts added this to the 3.4.0 milestone Oct 19, 2018

@samhouts samhouts added this to Ready in v3.5.0 Oct 19, 2018

@samhouts samhouts added this to To do in Sprint 144 Oct 31, 2018

@rmarinho rmarinho moved this from To do to In progress in Sprint 144 Nov 15, 2018

@rmarinho rmarinho self-assigned this Nov 15, 2018

rmarinho added a commit that referenced this issue Nov 15, 2018
@rmarinho rmarinho referenced this issue Nov 15, 2018
0 of 3 tasks complete

@rmarinho rmarinho moved this from In progress to Ready for Review (Issues) in Sprint 144 Nov 15, 2018

@samhouts samhouts added this to In Progress in v3.6.0 Nov 19, 2018

@samhouts samhouts added this to Ready in v3.4.0 Nov 19, 2018

@samhouts samhouts removed this from Ready in v3.5.0 Nov 19, 2018

@samhouts samhouts removed this from In Progress in v3.6.0 Nov 19, 2018

@samhouts samhouts added this to In Progress in v3.6.0 Nov 19, 2018

@samhouts samhouts removed this from In Progress in v3.6.0 Nov 19, 2018

@samhouts samhouts added this to In Progress in v3.6.0 Nov 19, 2018

@samhouts samhouts removed this from In Progress in v3.6.0 Nov 20, 2018

@samhouts samhouts added this to In Progress in v3.6.0 Nov 20, 2018

@samhouts samhouts removed this from In Progress in v3.6.0 Nov 20, 2018

@samhouts samhouts added this to In Progress in v3.6.0 Nov 20, 2018

@rmarinho rmarinho removed this from the 3.4.0 milestone Nov 21, 2018

@hartez hartez closed this in #4433 Nov 21, 2018

v3.4.0 automation moved this from Ready to Done Nov 21, 2018

Android Ready For Work automation moved this from To do to Done Nov 21, 2018

Sprint 144 automation moved this from Ready for Review (Issues) to Done Nov 21, 2018

hartez added a commit that referenced this issue Nov 21, 2018
[Android] Fix Label size when using Hint text (#4433)
* [Controls]Add repo for issue #2580

* [Android] Clear Hint before sizing Label

* [Controls]Update issue 2580 with more info

@samhouts samhouts moved this from In Progress to Done in v3.6.0 Nov 26, 2018

@samhouts samhouts removed this from Done in v3.6.0 Jan 3, 2019

@samhouts samhouts added this to In Progress in v3.5.0 Jan 11, 2019

@samhouts samhouts moved this from In Progress to Done in v3.5.0 Jan 11, 2019

@pamela032709

This comment has been minimized.

Copy link

commented Feb 25, 2019

ex:
it expands to the size of the help text string only on Android. never happen on ios.

@pamela032709

This comment has been minimized.

Copy link

commented Feb 25, 2019

Is this occurring on all platforms or a specific platform? Could you post an example layout (code or XAML) which demonstrates this?

I've tried the following layout to reproduce this problem, but both sets of labels lay out identically:

<StackLayout>

	<StackLayout Orientation="Horizontal" >

		<Label Text="Label 1" />
		<Label Text="Label 2" />
		<Label Text="Label 3" />
		<Label Text="Label 4" />
		<Label Text="Label 5" />
		<Label Text="Label 6" />
		<Label Text="Label 7" />
		<Label Text="Label 8" />

	</StackLayout>

	<StackLayout Orientation="Horizontal" >

		<Label Text="Label 1" AutomationId="label1" />
		<Label Text="Label 2" AutomationId="label2" />
		<Label Text="Label 3" AutomationId="label3" />
		<Label Text="Label 4" AutomationId="label4" />
		<Label Text="Label 5" AutomationId="label5" />
		<Label Text="Label 6" AutomationId="label6" />
		<Label Text="Label 7" AutomationId="label7" />
		<Label Text="Label 8" AutomationId="label8" />

	</StackLayout>

</StackLayout>

Am I missing a step to reproduce this?

Add helptext to each of those labels, add for example "tap here to access ..........many things ", add a long string to each of those labels. so they will all expand according to the size of the string.

@raymondjstone

This comment has been minimized.

Copy link
Author

commented Feb 25, 2019

It's meant to be fixed on 3.5 and above I believe but I have not had a chance to check yet HOWEVER the issue only happens when the accessibility help text is longer than the original label text and your example above is not setting that and so should not have the issue. This is a different field to the Automation ID field

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.