Convert span to button, add missing label, hide icons for screen readers (#8011)

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -863,11 +863,11 @@
 .bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
 .umb-datepicker .input-append .add-on{cursor: pointer;}
 .umb-datepicker .input-append .on-top {
+    border: 0 none;
     position: absolute;
     margin-left: -31px;
     margin-top: 1px;
     display: inline-block;
-    height: 22px;
     padding: 5px 6px 3px 6px;
     font-size: @baseFontSize;
     font-weight: normal;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html

@@ -20,10 +20,11 @@
                         ng-required="model.validation.mandatory"
                         val-server="value"
                         class="datepickerinput">
-                    <span class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
-                        <i class="icon-delete"></i>
-                    </span>
-                    <span class="add-on">
+                    <button type="button" class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
+                        <i class="icon-delete" aria-hidden="true"></i>
+                        <span class="sr-only"><localize key="content_removeDate">Clear date</localize></span>
+                    </button>
+                    <span class="add-on" aria-hidden="true">
                         <i class="icon-calendar"></i>
                     </span>
                 </div>