Sync to upcoming and 4.4 version

joomla · Nov 14, 2024 · 4d5ae99 · 4d5ae99
1 parent 59c62a5
commit 4d5ae99
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/docs/general-concepts/icons.md b/docs/general-concepts/icons.md
@@ -17,14 +17,15 @@ To display such an icon you can use:
 
 ```php
 ?>
-<span class="icon-cancel"></span> <?php echo Text::_('JCANCEL') ?> 
+<span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 
 ```
+The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. 
 
 You can also display FontAwesome icons which aren't used in Joomla, but you have to include an additional CSS class.
 According to [fa style names](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#full-style-names) the CSS classes should be "fa-solid" or "fa-brands":
 
 ```php
 ?>
-<span class="fa-solid fa-bomb"></span> <?php echo Text::_('JSAVE') ?> 
-<span class="fa-brands fa-facebook"></span> <?php echo 'facebook' ?> 
+<span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'facebook' ?> 
 ```
diff --git a/versioned_docs/version-4.4/general-concepts/icons.md b/versioned_docs/version-4.4/general-concepts/icons.md
@@ -17,13 +17,16 @@ To display such an icon you can use:
 
 ```php
 ?>
-<span class="icon-cancel"></span> <?php echo Text::_('JCANCEL') ?> 
+<span class="icon-cancel" aria-hidden="true"></span> <?php echo Text::_('JCANCEL') ?> 
 ```
+The attribute aria-hidden="true" hides the icon from screen readers and improves accessibility. 
 
-You can also display FontAwesome icons which aren't used in Joomla, but you have to include the "fa" class:
+You can also display FontAwesome icons which aren't used in Joomla, but you have to include an additional CSS class.
+According to [fa style names](https://docs.fontawesome.com/web/setup/upgrade/whats-changed#full-style-names) the CSS classes should be "fa-solid" or "fa-brands":
 
 ```php
 ?>
-<span class="fa fa-bomb"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-solid fa-bomb" aria-hidden="true"></span> <?php echo Text::_('JSAVE') ?> 
+<span class="fa-brands fa-facebook" aria-hidden="true"></span> <?php echo 'facebook' ?> 
 ```