Refactor empty element directive

app/assets/javascripts/angular/directives/components/accessible-element-directive.js

@@ -0,0 +1,12 @@
+angular.module('openproject.uiComponents')
+
+.directive('accessibleElement', [function() {
+  return {
+    restrict: 'E',
+    scope: { 
+      visibleText: '=',
+      readableText: '=',
+    },
+    templateUrl: "/templates/components/accessible_element.html"
+  };
+}]);

public/templates/components/accessible_element.html

@@ -0,0 +1,4 @@
+<span>
+  <span aria-hidden="true" role="presentation" tabindex="-1" ng-bind="visibleText"></span>
+  <span class="hidden-for-sighted" ng-bind="readableText"></span>
+</span>

public/templates/components/empty_element.html

@@ -1,4 +1,2 @@
-<span>
-  <span aria-hidden="true" role="presentation" tabindex="-1">-</span>
-  <span class="hidden-for-sighted"><%= I18n.t('timelines.empty') %></span>
-</span>
+<accessible-element visible-text="'-'" readable-text="I18n.t('timelines.empty')">
+</accessible-element>