fix accessibility problems with sorting in courseware manager, re #897

resources/assets/stylesheets/scss/courseware.scss

@@ -2341,12 +2341,16 @@ m a n a g e r
 
         .cw-manager-container-title {
             font-weight: 700;
+            display: flex;
+            gap: 5px;
+            justify-content: space-between;
             padding: 4px 4px 4px 8px;
             color: $base-color;
             background-color: $content-color-20;
 
             &.cw-manager-container-clickable-title {
                 cursor: pointer;
+                justify-content: start;
             }
 
             img {
@@ -2358,12 +2362,17 @@ m a n a g e r
         }
         .cw-manager-block {
             border: solid thin $content-color-40;
+            display: flex;
+            gap: 5px;
+            justify-content: space-between;
             padding: 1em;
             margin-bottom: 4px;
             background-color: $white;
 
             &.cw-manager-block-clickable {
                 cursor: pointer;
+                justify-content: start;
+
                 &:hover {
                     background-color: $base-color;
                     color: $white;
@@ -2462,21 +2471,14 @@ m a n a g e r
     .cw-manager-block-buttons,
     .cw-manager-container-buttons,
     .cw-manager-element-item-buttons {
-        display: flex;
-        justify-content: end;
-        min-width: 38px;
-
-        a {
-            flex: unset;
-        }
-
-        img {
+        button {
+            background: transparent;
+            border: none;
             cursor: pointer;
-            transition: opacity 0.4s ease-in-out;
+            padding: 0;
 
-            &.cw-manager-icon-disabled {
-                opacity: 0;
-                cursor: unset;
+            &[disabled] {
+                visibility: hidden;
             }
         }
     }

resources/vue/components/courseware/CoursewareManagerBlock.vue

 <template>
     <div :class="{ 'cw-manager-block-clickable': inserter }" class="cw-manager-block" @click="clickItem">
         <span v-if="inserter">
-            <studip-icon shape="arr_2left" size="16" role="sort" />
+            <studip-icon shape="arr_2left" role="sort" />
         </span>
         {{ block.attributes.title }}
         <div v-if="sortBlocks" class="cw-manager-block-buttons">
-            <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveUp}" shape="arr_2up" size="16" role="sort" @click="moveUp" />
-            <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveDown}" shape="arr_2down" size="16" role="sort" @click="moveDown" />
+            <button :disabled="!canMoveUp" @click="moveUp" :title="$gettext('Element nach oben verschieben')">
+                <studip-icon shape="arr_2up" role="sort" />
+            </button>
+            <button :disabled="!canMoveDown" @click="moveDown" :title="$gettext('Element nach unten verschieben')">
+                <studip-icon shape="arr_2down" role="sort" />
+            </button>
         </div>
     </div>
 </template>

resources/vue/components/courseware/CoursewareManagerContainer.vue

@@ -6,12 +6,16 @@
             @click="clickItem"
         >
             <span v-if="inserter">
-                <studip-icon shape="arr_2left" size="16" role="sort" />
+                <studip-icon shape="arr_2left" role="sort" />
             </span>
             {{ container.attributes.title }} ({{container.attributes.width}})
             <div v-if="sortContainers" class="cw-manager-container-buttons">
-                <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveUp}" shape="arr_2up" role="sort" @click="moveUp" />
-                <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveDown}" shape="arr_2down" role="sort" @click="moveDown" />
+                <button :disabled="!canMoveUp" @click="moveUp" :title="$gettext('Element nach oben verschieben')">
+                    <studip-icon shape="arr_2up" role="sort" />
+                </button>
+                <button :disabled="!canMoveDown" @click="moveDown" :title="$gettext('Element nach unten verschieben')">
+                    <studip-icon shape="arr_2down" role="sort" />
+                </button>
             </div>
         </div>
         <courseware-collapsible-box :open="false" :title="$gettext('Blöcke')" class="cw-manager-container-blocks">