diff --git a/components/ILIAS/UI/resources/js/Table/src/presentationtable.class.js b/components/ILIAS/UI/resources/js/Table/src/presentationtable.class.js index 31db448025dd..a34540139565 100755 --- a/components/ILIAS/UI/resources/js/Table/src/presentationtable.class.js +++ b/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'); } /** diff --git a/components/ILIAS/UI/src/Component/Symbol/Glyph/Glyph.php b/components/ILIAS/UI/src/Component/Symbol/Glyph/Glyph.php index 1f285bb0116c..5319b2e11637 100755 --- a/components/ILIAS/UI/src/Component/Symbol/Glyph/Glyph.php +++ b/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; } diff --git a/components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Glyph.php b/components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Glyph.php index 7dcbbaf4a019..197c187e274f 100755 --- a/components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Glyph.php +++ b/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; + } } diff --git a/components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Renderer.php index 278d9a3f5988..587e2cf8c2e6 100755 --- a/components/ILIAS/UI/src/Implementation/Component/Symbol/Glyph/Renderer.php +++ b/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(); } diff --git a/components/ILIAS/UI/src/Implementation/Component/Table/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Table/Renderer.php index 3e7f02d6ec67..6ba8e0981a6d 100755 --- a/components/ILIAS/UI/src/Implementation/Component/Table/Renderer.php +++ b/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); diff --git a/components/ILIAS/UI/src/templates/default/Symbol/tpl.glyph.standard.html b/components/ILIAS/UI/src/templates/default/Symbol/tpl.glyph.standard.html index 7da77fabbc12..67e2ff9342a1 100755 --- a/components/ILIAS/UI/src/templates/default/Symbol/tpl.glyph.standard.html +++ b/components/ILIAS/UI/src/templates/default/Symbol/tpl.glyph.standard.html @@ -1,3 +1,3 @@ -tabindex="0" class="glyph highlighted disabled" href="{ACTION}" aria-label="{LABEL}" aria-disabled="{ARIA_DISABLED}" id="{ID}"> +tabindex="0" class="glyph highlighted disabled" href="{ACTION}" aria-label="{LABEL}" aria-disabled="{ARIA_DISABLED}" id="{ID}" aria-expanded="{ARIA_EXPANDED}"> {GLYPH} diff --git a/components/ILIAS/UI/tests/Component/Table/PresentationTest.php b/components/ILIAS/UI/tests/Component/Table/PresentationTest.php index 9aea04db8680..2bf3edc4781f 100755 --- a/components/ILIAS/UI/tests/Component/Table/PresentationTest.php +++ b/components/ILIAS/UI/tests/Component/Table/PresentationTest.php @@ -165,12 +165,12 @@ public function testFullRendering(): void