Skip to content

Commit 0193621

Browse files
DOC Document changes to usage of font-icon CSS classes (#811)
1 parent cde7ebe commit 0193621

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

en/08_Changelogs/6.2.0.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@ title: 6.2.0 (unreleased)
2323
- In the `silverstripe/linkfield` module, the `.link-picker__delete` element has been moved up a level so that it is now a child of `.link-picker__link` and its tag has changed from `span` to `button`.
2424
- The viewport meta tag no longer includes `maximum-scale=1.0`, which prevented users from zooming in on mobile devices. It now includes `initial-scale=1.0` instead.
2525

26+
#### Changes to usage of `font-icon-*` CSS classes
27+
28+
The `font-icon-*` CSS classes used to add icons through the CMS use a font to render normal characters as icons.
29+
30+
This is very useful for sighted users, but represents a problem for screen reader users, since screen readers want to read the icons like normal characters. For example, the `font-icon-search` icon uses the character "s", so screen readers will read out "s" whenever they encounter that icon.
31+
32+
In many places in the CMS markup we have added `aria-hidden="true"` to elements using `font-icon-*` CSS classes. Often this has required removing the CSS class from the element it was on, and adding it instead to a child `<span>` element. We have also changed some `<i>` elements into `<span>` elements.
33+
34+
If you were relying on an element having a CSS class that starts with `font-icon-` in the CMS, please review your code, as the CSS class you're looking for may be on a child element now.
35+
36+
If your own code uses a `font-icon-*` CSS class, we recommend adding `aria-hidden="true"` if the icon is purely decorative. If the icon is needed to present information that isn't presented with text, we recommend moving the icon into a child element, and adding an `aria-label` attribute to your parent element so screen readers have the same context as sighted users.
37+
2638
### Other new features and enhancements {#other-new}
2739

2840
- [`Hierarchy::duplicateWithChildren()`](api:SilverStripe\ORM\Hierarchy\Hierarchy::duplicateWithChildren()) used to set new sort values for duplicated children - it now uses the sort values from the original records.

0 commit comments

Comments
 (0)