search

blackbaud / skyux2

SKY UX 2 is the new version of Blackbaud’s user experience framework that implements Blackbaud design patterns. It extends the framework to abstract many complexities of modern web development and takes advantage of Angular 2 to increase the tooling, testing, and performance available.
https://developer.blackbaud.com/skyux
MIT License
32 stars 65 forks source link

Icon checkboxes missing text equivalent labels (1.1.1) #2234

Closed Blackbaud-MattGregg closed 5 years ago

Blackbaud-MattGregg commented 5 years ago

Expected behavior

Labels are in the markup in the aria-label= property.

Actual behavior

The value in the TS file is not coming through in the markup produced (at least in the demo). The aria-label="" is blank.

Steps to reproduce

Go to https://developer.blackbaud.com/skyux/components/checkbox and inspect icon checkboxes

Blackbaud-TrevorBurch commented 5 years ago

@Blackbaud-MattGregg looking into this I think this one is simply that our demo doesn't go far enough to show how things work. The label property is an input on checkboxes that sets what aria-label is set to. However, this property is an empty string by default so if nothing is passed in by the end user then aria-label ends up being set to nothing. (Which is what you are seeing).

If I'm understanding correctly we just need to update the demo to show how to use this property. Am I correct in that?

Blackbaud-MattGregg commented 5 years ago

@Blackbaud-TrevorBurch When I view this one in the demo and in Plunkr, the label values are being set in the JS class, but the aria-label="" is empty then in the HTML output.

@blackbaud-johnly This component doesn't seem to have any documentation of properties like the radio button?

blackbaud-johnly commented 5 years ago

I created an issue to document the properties: https://github.com/blackbaud/skyux2/issues/2258.

Blackbaud-TrevorBurch commented 5 years ago

@Blackbaud-MattGregg I made blackbaud/skyux-forms#14 to address the empty attribute problem. All other places where we use the label input we do not set an empty string for the default; however, here we were and it was causing the attribute to show up when it shouldn't have. I verified that when a consumer sets the input that it shows up correctly.

Blackbaud-TrevorBurch commented 5 years ago

Demo has been updated. Closing since we have a separate issue for the docs portion.