A11y_.NET Core_ASP.NETCore_BlazorWasmManageyouraccountTwoPersonalData_DevTools:Incorrect role type provided to the "Delete" button as link.
v-akr opened this issue · comments
“Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.”
GitHubTags:
#A11yMAS;#A11yWCAG2.1;#A11yTCS;#.NET Core[aspnetcore]-Win32-June2022;#.NET Core;#A11ySev2;#WCAG4.1.2;#Win11;#Benchmark;#Zoom
Environment Details:
.NET Core
ASP.NET Core
Operating System: Windows 11 Enterprise 21H2
Prerequisite:
Set resolution to 1280*1024
Steps to Reproduce:
- Open command prompt
- Create a folder using command "mkdir foldername" e.g. "mkdir BlazorWasmr"
- Move to the created directory using command "cd foldername"
- Run the following command "dotnet new blazorwasm --hosted -au Individual" and hit enter.
- Run command "cd Server" and hit Enter.
- Run the following command "dotnet run"
- Copy the First URL link from Command prompt and copy it
- Paste it in URL section of Browser and hit Search
- Browser page will open with above template loaded
- Register account then login.
- Tab till "Hello with the userid" and click on it
- Navigate to Personal data and click on it.
- Navigate to the delete button and inspect the control type.
Actual:
Incorrect role type provided to the "Delete" button as link.
Similar issue is observed with below scenario :
1)ASP.NET Core - ManageyouraccountpersonalData :
- Open command prompt
- Create a folder using command "mkdir foldername" e.g. "mkdir angular"
- Move to the created directory using command "cd foldername"
- Run the following command "dotnet new angular -au Individual" and hit enter.
- Run the following command "dotnet run"
- Copy the First URL link from Command prompt and copy it
- Paste it in URL section of Browser and hit Search
- Browser page will open with above template loaded
- To get access to all the pages you'll need to register first and then log-in.
- Login with your registered account
- Tab till "Hello with the userid" and click on it.
- Navigate to Personal data and hit enter.
- Tab till "Delete" button and inspect
Expected:
Correct role type should be provided to the "Delete" button as Button.
User Impact:
Screen reader users will get incorrect information about the control.
Actually this is correct, its a link not a button... since it redirects to the actual delete Page:
Its just styled like a button:
<a id="delete" asp-page="DeletePersonalData" class="btn btn-danger">Delete</a>
Clicking on delete doesn't delete, it goes to
This behavior seems fine @blowdart thoughts?
@merriemcgaw Please let us know how we should proceed with this one to meet our accessibility standards.
@v-akr , you have tagged this as a Win32 app, but it is really a web app. Is there any change to the evaluation knowing it uses web rules?
I did some reading of the requirements and because you're taking a specific action with the button, it should be labeled as such. From a screen reader user's perspective, the links on the side are navigational, so they should be links. The links in the page Download and Delete are taking action and therefore the screen readers should think of them as a button.
Okay, what does that actually mean, we just need to add additional role metadata to this button?
Exactly. I believe you can set the aria-role to button even with the element being a link.
Reopening and assigning to tester to validate this fix.
@merriemcgaw what are the expectations for validation on these? This seems to have been open for almost a month now.
I will reach out to the testing team - it should have been done by now. They'll pick it up shortly. Thanks for the reminder. I'll look for others in the same state so we can get all of them cleaned up at the same time.
@merriemcgaw We downloaded the latest RC1 build from the first column of the above table and verified the bug, and the bug still reproduces.
Please find the attachment of the version
Could you please provide the repro steps that you followed, if the issue is not reproducing at your end.
@HaoK is this another case of just needing to wait for the code to flow to installers? This one is definitely older though, which is why I ask.
I see the following using todays build:
It has the <a id="delete" role="button" class="btn btn-danger" href="[/Identity/Account/Manage/DeletePersonalData](https://localhost:44456/Identity/Account/Manage/DeletePersonalData)">Delete</a>
Maybe they aren't uninstalling all the old net 7 sdks?
7.0.100-rc.2.22417.1 [C:\Program Files\dotnet\sdk] is the version I am using from the dotnet/installers main page
I have questions about whether this needs to have a button role at all. @rperez030 if something that visually looks like a button, but is really a link moving to a new page, would it be OK to have it reported as a link? In this case it redirects to the "delete personal info" page where the actual deletion takes place.
@Swati1700 can you test again, with the latest builds, but please be sure to have uninstalled all older preview .NET 7 builds from your machine or start in a clean environment.
We have installed latest build dotnet-sdk-7.0.100-rc.2.22452.3-win-x64 but getting a below error.
@HaoK is this the blocking bug we thought was fixed? Let's track where that might be, I really hope it makes it into the RC2 SDK
This just looks like some kind of nuget restore issue that isn't really related, I don't know if the packages aren't on the feed or if they are missing some nuget sources
They probably need this feed:
<configuration>
<packageSources>
<add key="dotnet7" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet7/nuget/v3/index.json" />
</packageSources>
</configuration>
@HaoK would you be so kind as to confirm that will resolve the situation and provide exact repro steps for the testers?
Its hard for me to provide exact repro steps as I only have a dev machine, so all I do is install the sdk open a powershell and dotnet new angular. But I'm not sure what ambient settings/configuration I have setup due to day to day work/etc.
If they want to give me remote access to a machine to install the builds and verify things on their machine before having them try, I'm happy to do that, but I don't really do anything other than install the sdk and then follow the steps in the bug
I can try to build a clean VM and give you both access to it if it works properly.
@v-akr - the updated machine setup instructions are as follows:
- On a clean machine install .NET RC2 SDK from the Top, Middle cell in the Installer Table
- Open a command prompt and enter the following command: dotnet nuget add source -n dotnet7 https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet7/nuget/v3/index.json
- Follow the test repro steps from here.
Moving this to the rc2 milestone to make sure the team watches this.
@Swati1700 @v-akr please retest all of the ASP.NET Core scenarios with the latest instructions.
Verified the issue and the issue is fixed. Hence closing the bug.
Issue is fixed. Adding #Closed; tag.