Fixed ahead and behind tag of a branch screen reader support

Pushed-by: Florian Scholdei<florian.scholdei@cloudogu.com>
Co-authored-by: Florian Scholdei<florian.scholdei@cloudogu.com>
Pushed-by: Konstantin Schaper<konstantin.schaper@cloudogu.com>
Committed-by: Florian Scholdei<florian.scholdei@cloudogu.com>

gradle/changelog/sr_aheadBehind.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Ahead and behind tag of a branch to screen reader

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -160,9 +160,7 @@
     "dangerZone": "Branch löschen",
     "aheadBehind": {
       "tooltip": "{{ahead}} Commit(s) vor, {{behind}} Commit(s) hinter dem Default Branch",
-      "label": "Voraus / Hinterher",
-      "ahead": "Voraus",
-      "behind": "Hinterher"
+      "label": "Voraus / Hinterher"
     },
     "delete": {
       "button": "Löschen",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -160,9 +160,7 @@
     "dangerZone": "Delete Branch",
     "aheadBehind": {
       "tooltip": "{{ahead}} commit(s) ahead, {{behind}} commit(s) behind default branch",
-      "label": "Ahead / Behind",
-      "ahead": "Ahead",
-      "behind": "Behind"
+      "label": "Ahead / Behind"
     },
     "delete": {
       "button": "Delete",

scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx

@@ -55,16 +55,17 @@ const AheadBehindTag: FC<Props> = ({ branch, details }) => {
     <Tooltip
       message={t("branch.aheadBehind.tooltip", { ahead: details.changesetsAhead, behind: details.changesetsBehind })}
     >
-      <span className="is-inline-flex is-align-items-center">
-        <Icon className={details.changesetsAhead > 0 ? "has-text-success" : "has-text-grey-light"}>arrow-up</Icon>
-        <Count aria-label={t("branch.aheadBehind.ahead")} className="is-size-7 pl-0">
-          {details.changesetsAhead}
-        </Count>
-        <Icon className={details.changesetsBehind > 0 ? "has-text-warning" : "has-text-grey-light"}>arrow-down</Icon>
-        <Count aria-label={t("branch.aheadBehind.behind")} className="is-size-7 pr-1">
-          {details.changesetsBehind}
-        </Count>
-      </span>
+      <>
+        <span className="is-sr-only">
+          {t("branch.aheadBehind.tooltip", { ahead: details.changesetsAhead, behind: details.changesetsBehind })}
+        </span>
+        <span className="is-inline-flex is-align-items-center" aria-hidden="true">
+          <Icon className={details.changesetsAhead > 0 ? "has-text-success" : "has-text-grey-light"}>arrow-up</Icon>
+          <Count className="is-size-7 pl-0">{details.changesetsAhead}</Count>
+          <Icon className={details.changesetsBehind > 0 ? "has-text-warning" : "has-text-grey-light"}>arrow-down</Icon>
+          <Count className="is-size-7 pr-1">{details.changesetsBehind}</Count>
+        </span>
+      </>
     </Tooltip>
   );
 };