Fix(Accessibility): Add aria-expanded to presentation table controls

components/ILIAS/UI/resources/js/Table/src/presentationtable.class.js

@@ -38,6 +38,12 @@ export default class PresentationTable {
     const row = this.#component.querySelector(`#${rowId}`);
     row.classList.remove('collapsed');
     row.classList.add('expanded');
+
+    const expandButton = row.querySelector('.il-table-presentation-row-controls-expander .glyph');
+    const collapseButton = row.querySelector('.il-table-presentation-row-controls-collapser .glyph');
+
+    if (expandButton) expandButton.setAttribute('aria-expanded', 'true');
+    if (collapseButton) collapseButton.setAttribute('aria-expanded', 'true');
   }
 
   /**
@@ -47,6 +53,12 @@ export default class PresentationTable {
     const row = this.#component.querySelector(`#${rowId}`);
     row.classList.remove('expanded');
     row.classList.add('collapsed');
+
+    const expandButton = row.querySelector('.il-table-presentation-row-controls-expander .glyph');
+    const collapseButton = row.querySelector('.il-table-presentation-row-controls-collapser .glyph');
+
+    if (expandButton) expandButton.setAttribute('aria-expanded', 'false');
+    if (collapseButton) collapseButton.setAttribute('aria-expanded', 'false');
   }
 
   /**

components/ILIAS/UI/src/Component/Symbol/Glyph/Glyph.php

@@ -164,4 +164,14 @@ public function withAdditionalOnLoadCode(\Closure $binder);
 
     /** @deprecated will be removed in ILIAS 11. please use a Button instead. */
     public function getOnLoadCode(): ?\Closure;
+
+    /**
+     * Get a Glyph like this with aria-expanded attribute.
+     */
+    public function withAriaExpanded(string $aria_expanded): Glyph;
+
+    /**
+     * Get the aria-expanded attribute value.
+     */
+    public function getAriaExpanded(): ?string;
 }

components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Glyph.php

@@ -100,6 +100,7 @@ class Glyph implements C\Symbol\Glyph\Glyph
     private array $counters;
     private bool $highlighted;
     private bool $active = true;
+    private ?string $aria_expanded = null;
 
     public function __construct(string $type, string $label, string $action = null)
     {
@@ -215,4 +216,16 @@ public function isTabbable(): bool
         $has_signal = isset($this->triggered_signals['click']) && $this->triggered_signals['click'] !== null;
         return  ($has_signal || $has_action) && $this->isActive();
     }
+
+    public function withAriaExpanded(string $aria_expanded): C\Symbol\Glyph\Glyph
+    {
+        $clone = clone $this;
+        $clone->aria_expanded = $aria_expanded;
+        return $clone;
+    }
+
+    public function getAriaExpanded(): ?string
+    {
+        return $this->aria_expanded;
+    }
 }

components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Renderer.php

@@ -74,6 +74,13 @@ public function render(Component\Component $component, RendererInterface $defaul
             $tpl->parseCurrentBlock();
         }
 
+        $aria_expanded = $component->getAriaExpanded();
+        if ($aria_expanded !== null) {
+            $tpl->setCurrentBlock("with_aria_expanded");
+            $tpl->setVariable("ARIA_EXPANDED", $aria_expanded);
+            $tpl->parseCurrentBlock();
+        }
+
         $tpl->setVariable("GLYPH", $this->getInnerGlyphHTML($component, $default_renderer));
         return $tpl->get();
     }

components/ILIAS/UI/src/Implementation/Component/Table/Renderer.php

@@ -136,9 +136,11 @@ protected function renderPresentationRow(
         $id = $this->bindJavaScript($component);
 
         $expander = $f->symbol()->glyph()->expand("#")
-            ->withOnClick($sig_show);
+            ->withOnClick($sig_show)
+            ->withAriaExpanded("false");
         $collapser = $f->symbol()->glyph()->collapse("#")
-            ->withOnClick($sig_hide);
+            ->withOnClick($sig_hide)
+            ->withAriaExpanded("true");
         $shy_expander = $f->button()->shy($this->txt("presentation_table_more"), "#")
             ->withOnClick($sig_show);
 

components/ILIAS/UI/src/templates/default/Symbol/tpl.glyph.standard.html

@@ -1,3 +1,3 @@
-<a <!-- BEGIN tabbable -->tabindex="0" <!-- END tabbable -->class="glyph<!-- BEGIN highlighted --> highlighted<!-- END highlighted --><!-- BEGIN disabled --> disabled<!-- END disabled -->"<!-- BEGIN with_action --> href="{ACTION}"<!-- END with_action --> aria-label="{LABEL}"<!-- BEGIN with_aria_disabled --> aria-disabled="{ARIA_DISABLED}"<!-- END with_aria_disabled --><!-- BEGIN with_id --> id="{ID}"<!-- END with_id -->>
+<a <!-- BEGIN tabbable -->tabindex="0" <!-- END tabbable -->class="glyph<!-- BEGIN highlighted --> highlighted<!-- END highlighted --><!-- BEGIN disabled --> disabled<!-- END disabled -->"<!-- BEGIN with_action --> href="{ACTION}"<!-- END with_action --> aria-label="{LABEL}"<!-- BEGIN with_aria_disabled --> aria-disabled="{ARIA_DISABLED}"<!-- END with_aria_disabled --><!-- BEGIN with_id --> id="{ID}"<!-- END with_id --><!-- BEGIN with_aria_expanded --> aria-expanded="{ARIA_EXPANDED}"<!-- END with_aria_expanded -->>
 {GLYPH}
 </a>

components/ILIAS/UI/tests/Component/Table/PresentationTest.php

@@ -165,12 +165,12 @@ public function testFullRendering(): void
 
             <div class="il-table-presentation-row-controls col-lg-auto col-sm-12">
                 <div class="il-table-presentation-row-controls-expander inline">
-                    <a tabindex="0" class="glyph" href="#" aria-label="expand_content" id="id_5">
+                    <a tabindex="0" class="glyph" href="#" aria-label="expand_content" id="id_5" aria-expanded="false">
                         <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                     </a>
                 </div>
                 <div class="il-table-presentation-row-controls-collapser">
-                    <a tabindex="0" class="glyph" href="#" aria-label="collapse_content" id="id_6">
+                    <a tabindex="0" class="glyph" href="#" aria-label="collapse_content" id="id_6" aria-expanded="true">
                         <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                     </a>
                 </div>
@@ -268,12 +268,12 @@ public function testMinimalRendering(): void
 
             <div class="il-table-presentation-row-controls col-lg-auto col-sm-12">
                 <div class="il-table-presentation-row-controls-expander inline">
-                    <a tabindex="0" class="glyph" href="#" aria-label="expand_content" id="id_5">
+                    <a tabindex="0" class="glyph" href="#" aria-label="expand_content" id="id_5" aria-expanded="false">
                         <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                     </a>
                 </div>
                 <div class="il-table-presentation-row-controls-collapser">
-                    <a tabindex="0" class="glyph" href="#" aria-label="collapse_content" id="id_6">
+                    <a tabindex="0" class="glyph" href="#" aria-label="collapse_content" id="id_6" aria-expanded="true">
                         <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
                     </a>
                 </div>