Skip to content

Commit 317f732

Browse files
authored
Update for suggestions
1 parent 423937e commit 317f732

File tree

1 file changed

+12
-8
lines changed

1 file changed

+12
-8
lines changed

src/Icons/doc/index.rst

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -481,41 +481,45 @@ of the following attributes: ``aria-label``, ``aria-labelledby`` or ``title``.
481481

482482
<twig:ux:icon name="user-profile" aria-hidden="false" />
483483

484-
## Accessibility: Descriptive Titles and Descriptions
484+
**Accessibility: Descriptive Titles and Descriptions**
485485

486-
.. versionadded:: NEXT\_VERSION
486+
.. versionadded:: 2.28
487487

488-
The `ux_icon()` function and the `<twig:ux:icon>` component now support accessible SVG metadata via the `title` and `desc` attributes.
488+
The `ux_icon()` function and the `<twig:ux:icon>` component now support accessible SVG metadata via the `title` and `desc` attributes in 2.28.
489489

490-
These are automatically injected into the `<svg>` markup as child elements, and properly referenced using `aria-labelledby` for improved screen reader support.
490+
These are automatically injected into the ``<svg>`` markup as child elements, and properly referenced using ``aria-labelledby`` for improved screen reader support.
491491

492492
**How it works:**
493493

494494
When you pass a `title` and/or `desc` attribute, they are rendered inside the `<svg>` as follows:
495495

496496
.. code-block:: html+twig
497497

498-
```
499498
{{ ux_icon('bi:plus-square-dotted', {
500499
width: '16px',
501500
height: '16px',
502501
class: 'text-success',
503502
title: 'Add Stock',
504503
desc: 'This icon indicates stock entry functionality.'
505504
}) }}
506-
```
507505

508506
Renders:
509507

510508
.. code-block:: html
511509

512-
```
513510
<svg class="text-success" width="16px" height="16px" aria-labelledby="icon-title-abc icon-desc-def">
514511
<title id="icon-title-abc">Add Stock</title>
515512
<desc id="icon-desc-def">This icon indicates stock entry functionality.</desc>
516513
<!-- inner SVG content -->
517514
</svg>
518-
```
515+
516+
.. note::
517+
518+
- If ``aria-labelledby`` is already defined in your attributes, it will **not** be overwritten.
519+
- ``role="img"`` is **not added automatically**. You may choose to include it if your use case requires.
520+
- When neither ``title``, ``desc``, ``aria-label``, nor ``aria-labelledby`` are provided, ``aria-hidden="true"`` will still be automatically applied.
521+
522+
This feature brings UX Icons in line with modern accessibility recommendations and helps developers build more inclusive user interfaces.
519523

520524
To learn more about accessible SVG elements:
521525

0 commit comments

Comments
 (0)