Fixed issue with File Drop

[Blackbaud-SteveBrush]

Depending on the compileMode, the Avatar Component (read: File Drop) looks different. This is due to how the HTML is rendered. During jit (or skyux serve), the HTML template is parsed differently, and the innerHTML of the file drop button is extracted and added outside of it. During an aot build, the innerHTML of the button is preserved. I'm assuming this is because the webpack loaders used for each scenario are different.

(Note that placing block elements inside a button is considered invalid.)

If compile mode is jit or you type skyux serve:

If compile mode is aot:

(This is why the live documentation looks fine, but serving the docs locally with skyux serve looks different.)

[codecov-io]

Codecov Report

Merging #1073 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #1073   +/-   ##
======================================
  Coverage     100%    100%           
======================================
  Files         355     355           
  Lines        6577    6577           
  Branches      842     842           
======================================
  Hits         6577    6577

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 81906aa...2e1368b. Read the comment docs.

[Blackbaud-BobbyEarl]

Is there any accessibility concern by changing this from a button? Perhaps @Blackbaud-MattGregg has some insight?

[Blackbaud-MattGregg]

Yes, I think this is going to be problematic looking at the changes (I think I'm looking at the right thing) b/c there isn't anything that is going to be keyboard focusable without the button OR communicate this function exists (i.e., the

) Additionally, I've found this one problematic b/c there isn't any communication of state (i.e., has/doesn't have an image). @Blackbaud-SteveBrush want to look at this together?

[Blackbaud-SteveBrush]

@Blackbaud-BobbyEarl @Blackbaud-MattGregg I was worried that would be an accessibility issue. Let me look at it further; I'll reach out to you, Matt, if I encounter any issues. Thanks!

[Blackbaud-SteveBrush]

@Blackbaud-BobbyEarl @Blackbaud-MattGregg This is ready for another look!

[Blackbaud-MattGregg]

Looks better. will be reachable via keyboard and has text for it's function. Back to where it was before. We could look at other A11y improvements later.

[bobbyearl]

@Blackbaud-SteveBrush Should the cursor still be a pointer as is with the current behavior?

[Blackbaud-SteveBrush]

Good catch, @Blackbaud-BobbyEarl. Fixed!