Accessible ZK Datebox

Question

The ZK datebox component generates HTML code like this (see https://www.zkoss.org/zkdemo/input/date_and_time_picker)

<span id="cJ8Pp" class="z-datebox">
  <input id="cJ8Pp-real" class="z-datebox-input" autocomplete="off" value="2016.12.23." type="text" size="12">
    <a id="cJ8Pp-btn" class="z-datebox-button">
      <i class="z-datebox-icon z-icon-calendar"></i>
    </a>
    <div id="cJ8Pp-pp" style="display:none"></div>
</span>

The <i> tag is styled with the following CSS to display a calendar icon:

.z-icon-calendar:before {
    content: "\f073";
}

This kind of solutions are applied also in other ZK components like paging icons, etc.

I have to make accessibility approvements on our pages. I see that is a "mission impossible", because ZK generates funny things like <div> inside <span> or this Unicode icon trick. But perhaps I can do some improvements.

As the first idea I put an "alt" attribute to the <a> tag because it is a command component without textual representation. Then I realised that it is invalid HTML, "alt" should be set on an <img> tag inside <a>. But there is no valid place in my situation for the "alt" attribute.

What should I do (apart from choosing an other framework)?