fix: aria-labelledby attribute has an extra space

[knilob]

Description

The aria-labelledby attribute on the fontPercent, edgeStyle, and
fontFamily select options includes an extra space since there is
no ledgendId variable being set on the createElFont_() method.

Fixes #4688

Specific Changes proposed

This fix adds a check to see if the legendId value is set or not inside
the createElSelect_() method. This should keep the extra space
from appearing on the select tags created by the createElFont_()
method.

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[gkatsev]

This seems reasonable to me.

[OwenEdwards]

@knilob did you see any symptom of this extra space? Was a screen reader (JAWS, NVDA, VoiceOver, TalkBack) having issues with it? I'm just wondering because, like CSS classes, aria-labelledby takes a space-separated list of values (in this case IDs), so it really shouldn't have any impact. If it does, it'd be worth knowing exactly what and where. Thanks!

[gkatsev]

@OwenEdwards see #4688, seems like it's being flagged by the WAVE tool from webaim

[gkatsev]

Also, looks like we have a bug in the generation of the aria-labelledby for the font families since the values themselves have spaces when we create the idea for it, it ends up messing up. For example, we end up with an id captions-font-family-vid1_component_423-Proportional Sans-Serif instead of something like captions-font-family-vid1_component_423-Proportional-Sans-Serif and then when we reference it it's wrong.

[OwenEdwards]

@gkatsev seems like a component ought to have a general-purpose toID() method (or maybe it should be part of DOM) that only allows valid ID labels to be created; anything that's not a-z, A-Z, 0-9, - or _ gets converted (technically a period is allowed too, but it gets tricky for CSS selectors).

I'm not convinced that having a space at the start or end of aria-labelledby (or aria-describedby) is invalid, but if WAVE is flagging it, it seems like any time an aria-labelledby is created it could just be trim()'ed.

[gkatsev]

Yeah, I don't think this causes issues and making the code remove it isn't a big burden. trim() is probably better and now that I noticed we need a slightly better refactor, we probably should switch to that.