1. Home
  2. Forum
  3. Blazor
  4. Impossible to set the aria-label on the span to have the narrator read it

Impossible to set the aria-label on the span to have the narrator read it

Hi!

I'm currently trying to set the aria-label attribute on a SfDropDownList component, but I'm unable to achieve that. I've tried adding the "aria-label" directly in the component declaration or in the HtmlAttributes property, but in both cases it puts the aria-label on the underlying input field instead of the span that's wrapping up the component. 

The result of that is that the narrator is not able to read the label. Is there any way to have the aria-label set on the span so that it would work with narrator?


Thanks in advance for any help!

Bruno


10 Replies
SP Sureshkumar P Syncfusion Team September 12, 2022 08:40 AM UTC

Hi Bruno,

We have validated your requirement; we suggest you use our placeholder and FloatLabelType property to avoid manual aria-label attribute binding. The narrator also read our placeholder text.

Find the code example here:

<p>DropDownList value is:<strong>@DropVal</strong></p>

 

<SfDropDownList TValue="string" Placeholder="e.g. Australia" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" TItem="Country" @bind-Value="@DropVal" DataSource="@Countries">

    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>

</SfDropDownList>

 

@code {

 

    public string DropVal;

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

    {

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

Please find the sample in the attachment:

If you have faced any difficulties when using our placeholder text, then please revert us with a detailed use case scenario. These details will help us to validate and resolve the issue as earlier as possible.

Regards,

Sureshkumar P


Attachment: DDLServer_d6e2b55b.zip

BB Bruno Barrette September 12, 2022 12:15 PM UTC

Hi  Sureshkumar,


Thank you very much for the reply. Unfortunately, this solution does not make the narrator read the label. When I navigate the screen, the tabs end up on the dropdown itself and since it doesn't have an aria-label, it doesn't say anything for it.

Also in our requirements, we have a separate label and can't use the floating label. It would be good that the dropdown supports the aria-label without having to depend on the floating label. If the aria-label was set on the span instead of its inner input field, screen readers would see it correctly.


I also tried to use the "aria-labelledby" attribute (both on the SfDropDownList directly and in its HtmlAttributes property), and unfortunately it added the attribute on the inner input instead of on the span at the root of the component.


So at the moment, I still don't see a way of adding an aria-label on the component to make it work for screen readers. Hopefully there is another way.


Regards,

Bruno


BS Buvana Sathasivam Syncfusion Team September 14, 2022 04:11 AM UTC

Hi Bruno,


Currently, we are validating your reported query. We will update you with further details on or before September 16, 2022.


Regards,

Buvana S


SP Sureshkumar P Syncfusion Team September 20, 2022 09:16 AM UTC

Hi Bruno,

Thanks for your shared information. We have confirmed the reported issue is an issue at our end and this fix will be included in our upcoming patch release, which is expected to be rolled out on October 5th,2022.

You can track the status of this issue from the below feedback.

Feedback: https://www.syncfusion.com/feedback/37834



Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

Regards,

Sureshkumar P


BB Bruno Barrette replied to Sureshkumar P September 20, 2022 11:51 AM UTC

Thank you for the prompt response Sureshkumar, looking forward to the release!


Regards,

Bruno


SP Sureshkumar P Syncfusion Team September 21, 2022 06:54 AM UTC

Hi Bruno,


Thanks for your update, as per our previous update we will include the fix in the upcoming patch release.


Regards,

Sureshkumar P


SP Sureshkumar P Syncfusion Team October 6, 2022 11:26 AM UTC

Hi Bruno,,


We are facing complexity to resolve this issue. We will include it in the upcoming weekly patch release.

Which is expected to be rolled out on October 12th,2022.


Regards,

Sureshkumar P


SP Sureshkumar P Syncfusion Team October 12, 2022 10:35 AM UTC

Hi Bruno,,


We are facing complexity to resolve this issue. We will include it in the upcoming weekly patch release.

Which is expected to be rolled out on October 26th,2022.


Regards,

Sureshkumar P


SP Sureshkumar P Syncfusion Team October 27, 2022 11:39 AM UTC

Hi Bruno,

We have fixed your reported issue from our end in the latest 20.3.52 version. So, we suggest you upgrade to our latest version to resolve the current issue.

Please find the release notes here: https://blazor.syncfusion.com/documentation/release-notes/20.3.52?type=all#dropdownlist

Regards,

Sureshkumar P


BB Bruno Barrette November 1, 2022 12:25 PM UTC

Hi,


Thanks for the update, I can confirm that it works with the latest release.


Regards,

Bruno


Loader.
Up arrow icon