diff --git a/en/08_Changelogs/6.2.0.md b/en/08_Changelogs/6.2.0.md index 46d5096a..91253b05 100644 --- a/en/08_Changelogs/6.2.0.md +++ b/en/08_Changelogs/6.2.0.md @@ -19,23 +19,21 @@ title: 6.2.0 (unreleased) -## Features and enhancements - -### Accessibility improvements +## Accessibility improvements -#### Skip nav link added +### Skip nav link added A skip link has been added to the CMS to allow users to skip past the main navigation. This is primarily for users who use a screen reader or who navigate via the keyboard. The link is visually hidden until it receives focus by pressing the tab key. -#### Roving tabindex +### Roving tabindex We've implemented roving tabindex for some UI regions within the CMS. These areas now act as a single tab stop, allowing users to navigate internal items with arrow keys and skip the entire section with a single tab. This aligns with standard ARIA practices for keyboard-accessible navigation. -#### Keyboard navigation for the site tree +### Keyboard navigation for the site tree Keyboard navigation has been added for the site tree within the CMS, which now uses a [roving tabindex](#roving-tabindex). Users can now navigate, expand, and collapse tree nodes using arrow keys or the tab key. The "End" and "Home" keys move focus to the top and bottom page in the current nesting level, and the space bar expands and collapses nodes with children. -#### Keyboard navigation for "Files" admin section +### Keyboard navigation for "Files" admin section Keyboard navigation has been improved for the in the "Files" admin section. The files gallery and table views both now use a [roving tabindex](#roving-tabindex). @@ -47,31 +45,31 @@ In both views, pressing "Space" on a focused file or folder selects it. Pressing Various other attributes have also been added as appropriate so that screen reader users can navigate the asset admin. -#### Keyboard sorting for elemental blocks +### Keyboard sorting for elemental blocks Elemental blocks can now be reordered using the keyboard in the CMS. There is now a keyboard focusable drag handle which can be activated using the "Space" or "Enter" keys, and sorted using the "Up" and "Down" arrow keys. -#### Improved keyboard navigation for tabs +### Improved keyboard navigation for tabs The CMS now supports keyboard navigation between tabs using the left and right arrow keys (go to the previous or next tab) and the Home and End keys (go to the first and last tab). When a user sets focus on a tab using the keyboard, the relevant tab panel is automatically displayed, removing the need to press Enter or Space to activate the tab. Previously, keyboard navigation for tabs was inconsistent. -#### Campaign admin help menu improvements +### Campaign admin help menu improvements The help menu in campaign admin has been improved to make it easier to use for keyboard and screen reader users. The help icon is no longer shown when the help menu is open as it's not required as the close button is sufficient. When the help menu is opened or closed, focus is moved to the relevant button so that keyboard users can easily find it. -#### Sortable header ARIA attributes +### Sortable header ARIA attributes Sortable headers on a grid field and asset-admin table view now include `aria-sort` attributes that indicate the current sort direction of the column. -#### Screen reader improvements for pagination +### Screen reader improvements for pagination Pagination controls in grid fields and asset-admin now have an improved experience for screen reader users, with the use of a `nav` tag with an `aria-label` attribute instead of a `div`, and a more descriptive `title` attribute on the pagination control showing the current page. -#### Changes to admin section HTML markup +### Changes to admin section HTML markup - The `.cms-menu` element tag has been changed from a `div` to a `nav`. - Inside `.cms-panel` elements, the `a.toggle-collapse` and `a.toggle-expand` links have been replaced with a single `button.cms-panel-toggle__button` element. @@ -85,11 +83,11 @@ Pagination controls in grid fields and asset-admin now have an improved experien - The "Go to previous record" and "Go to next record" buttons in a GridField detail form, when disabled, have changed from a `span` element to an `a` element with an `aria-disabled="true"` attribute. - `.grid-field__paginator__controls` and `.paginator-footer` elements have been changed from using a `div` tag to a `nav` tag. -#### Changes to HTML markup elsewhere +### Changes to HTML markup elsewhere - In the `silverstripe/sharedraftcontent` module, the markup for the message on the front-end has changed to use `
` and `` elements for the expand/collapse functionality and a `
` list instead of a `
    ` list. -#### Changes to usage of `font-icon-*` CSS classes +### Changes to usage of `font-icon-*` CSS classes The `font-icon-*` CSS classes are used to add icons through the CMS use a font to render normal characters as icons. @@ -111,7 +109,7 @@ If you are using the `Modal` component from `react-strap` inside the CMS, the cl Functionality has also been added to allow swapping icons in an accessible way for alternating buttons (e.g. the save and publish buttons). See [how to implement an alternating button](/developer_guides/customising_the_admin_interface/how_tos/cms_alternating_button/) (which has been updated) for details. -#### Improved contrast and focus states +### Improved contrast and focus states Contrast has been improved in various areas, including in the TinyMCE HTML editor. In some cases the contrast improvement has also included a change in the colour used. @@ -130,6 +128,8 @@ The new focus styling uses CSS variables, so you can easily change the values an |`--focus-outline-offset`|Used with the `outline-offset` CSS property.| |`--focus-outline-offset-inset`|Places the outline inside the element - used when there isn't enough space for an outline outside the element's bounds. Set `--focus-outline-offset: var(--focus-outline-offset-inset)` or set the `outline-offset` property directly.| +## Features and enhancements + ### Unsaved changes indicator {#unsaved-changes-indicator} A new unsaved changes indicator has been introduced to CMS edit forms. The indicator appears after a configurable amount of time after starting to edit a form, providing real-time visual alerts when changes have been made but not yet saved. This helps users keep track of their work and prevent accidental data loss by making unsaved modifications more apparent. @@ -138,7 +138,7 @@ A new unsaved changes indicator has been introduced to CMS edit forms. The indic The indicator appears as a "notice" after a configurable initial period (defaulting to five minutes) and escalates to a more prominent "warning" after a second configurable interval (defaulting to ten minutes). This escalation ensures users are increasingly aware of long-standing unsaved changes. -See [Unsaved changes indicator](/developer_guides/customising_the_admin_interface/unsaved-changes-indicator/) instructions on how to configure the indicator. +See [unsaved changes indicator](/developer_guides/customising_the_admin_interface/unsaved_changes_indicator/) instructions on how to configure the indicator. ### PHP 8.5 support {#php-8-5-support} diff --git a/en/08_Changelogs/beta/6.2.0-beta1.md b/en/08_Changelogs/beta/6.2.0-beta1.md index 7f4a67ae..55554208 100644 --- a/en/08_Changelogs/beta/6.2.0-beta1.md +++ b/en/08_Changelogs/beta/6.2.0-beta1.md @@ -64,23 +64,21 @@ A full list of module versions included in CMS Recipe 6.2.0-beta1 is provided be
-## Features and enhancements - -### Accessibility improvements +## Accessibility improvements -#### Skip nav link added +### Skip nav link added A skip link has been added to the CMS to allow users to skip past the main navigation. This is primarily for users who use a screen reader or who navigate via the keyboard. The link is visually hidden until it receives focus by pressing the tab key. -#### Roving tabindex +### Roving tabindex We've implemented roving tabindex for some UI regions within the CMS. These areas now act as a single tab stop, allowing users to navigate internal items with arrow keys and skip the entire section with a single tab. This aligns with standard ARIA practices for keyboard-accessible navigation. -#### Keyboard navigation for the site tree +### Keyboard navigation for the site tree Keyboard navigation has been added for the site tree within the CMS, which now uses a [roving tabindex](#roving-tabindex). Users can now navigate, expand, and collapse tree nodes using arrow keys or the tab key. The "End" and "Home" keys move focus to the top and bottom page in the current nesting level, and the space bar expands and collapses nodes with children. -#### Keyboard navigation for "Files" admin section +### Keyboard navigation for "Files" admin section Keyboard navigation has been improved for the in the "Files" admin section. The files gallery and table views both now use a [roving tabindex](#roving-tabindex). @@ -92,31 +90,31 @@ In both views, pressing "Space" on a focused file or folder selects it. Pressing Various other attributes have also been added as appropriate so that screen reader users can navigate the asset admin. -#### Keyboard sorting for elemental blocks +### Keyboard sorting for elemental blocks Elemental blocks can now be reordered using the keyboard in the CMS. There is now a keyboard focusable drag handle which can be activated using the "Space" or "Enter" keys, and sorted using the "Up" and "Down" arrow keys. -#### Improved keyboard navigation for tabs +### Improved keyboard navigation for tabs The CMS now supports keyboard navigation between tabs using the left and right arrow keys (go to the previous or next tab) and the Home and End keys (go to the first and last tab). When a user sets focus on a tab using the keyboard, the relevant tab panel is automatically displayed, removing the need to press Enter or Space to activate the tab. Previously, keyboard navigation for tabs was inconsistent. -#### Campaign admin help menu improvements +### Campaign admin help menu improvements The help menu in campaign admin has been improved to make it easier to use for keyboard and screen reader users. The help icon is no longer shown when the help menu is open as it's not required as the close button is sufficient. When the help menu is opened or closed, focus is moved to the relevant button so that keyboard users can easily find it. -#### Sortable header ARIA attributes +### Sortable header ARIA attributes Sortable headers on a grid field and asset-admin table view now include `aria-sort` attributes that indicate the current sort direction of the column. -#### Screen reader improvements for pagination +### Screen reader improvements for pagination Pagination controls in grid fields and asset-admin now have an improved experience for screen reader users, with the use of a `nav` tag with an `aria-label` attribute instead of a `div`, and a more descriptive `title` attribute on the pagination control showing the current page. -#### Changes to admin section HTML markup +### Changes to admin section HTML markup - The `.cms-menu` element tag has been changed from a `div` to a `nav`. - Inside `.cms-panel` elements, the `a.toggle-collapse` and `a.toggle-expand` links have been replaced with a single `button.cms-panel-toggle__button` element. @@ -130,11 +128,11 @@ Pagination controls in grid fields and asset-admin now have an improved experien - The "Go to previous record" and "Go to next record" buttons in a GridField detail form, when disabled, have changed from a `span` element to an `a` element with an `aria-disabled="true"` attribute. - `.grid-field__paginator__controls` and `.paginator-footer` elements have been changed from using a `div` tag to a `nav` tag. -#### Changes to HTML markup elsewhere +### Changes to HTML markup elsewhere - In the `silverstripe/sharedraftcontent` module, the markup for the message on the front-end has changed to use `
` and `` elements for the expand/collapse functionality and a `
` list instead of a `
    ` list. -#### Changes to usage of `font-icon-*` CSS classes +### Changes to usage of `font-icon-*` CSS classes The `font-icon-*` CSS classes are used to add icons through the CMS use a font to render normal characters as icons. @@ -156,7 +154,7 @@ If you are using the `Modal` component from `react-strap` inside the CMS, the cl Functionality has also been added to allow swapping icons in an accessible way for alternating buttons (e.g. the save and publish buttons). See [how to implement an alternating button](/developer_guides/customising_the_admin_interface/how_tos/cms_alternating_button/) (which has been updated) for details. -#### Improved contrast and focus states +### Improved contrast and focus states Contrast has been improved in various areas, including in the TinyMCE HTML editor. In some cases the contrast improvement has also included a change in the colour used. @@ -175,15 +173,17 @@ The new focus styling uses CSS variables, so you can easily change the values an |`--focus-outline-offset`|Used with the `outline-offset` CSS property.| |`--focus-outline-offset-inset`|Places the outline inside the element - used when there isn't enough space for an outline outside the element's bounds. Set `--focus-outline-offset: var(--focus-outline-offset-inset)` or set the `outline-offset` property directly.| +## Features and enhancements + ### Unsaved changes indicator {#unsaved-changes-indicator} A new unsaved changes indicator has been introduced to CMS edit forms. The indicator appears after a configurable amount of time after starting to edit a form, providing real-time visual alerts when changes have been made but not yet saved. This helps users keep track of their work and prevent accidental data loss by making unsaved modifications more apparent. -![Unsaved changes indicator](../_images/unsaved-changes-indicator.png) +![Unsaved changes indicator](../../_images/unsaved-changes-indicator.png) The indicator appears as a "notice" after a configurable initial period (defaulting to five minutes) and escalates to a more prominent "warning" after a second configurable interval (defaulting to ten minutes). This escalation ensures users are increasingly aware of long-standing unsaved changes. -See [Unsaved changes indicator](/developer_guides/customising_the_admin_interface/unsaved-changes-indicator/) instructions on how to configure the indicator. +See [unsaved changes indicator](/developer_guides/customising_the_admin_interface/unsaved_changes_indicator/) instructions on how to configure the indicator. ### PHP 8.5 support {#php-8-5-support} @@ -195,14 +195,14 @@ Note that some third-party modules may not yet support PHP 8.5, so PHP deprecati The [dnadesign/silverstripe-elemental](/optional_features/elemental/) module now includes functionality that allows elemental blocks to be moved from one parent record to another. This includes moving blocks between different elemental areas on the same parent record. -![move block button](./_images/move-block-button.png) +![move block button](../_images/move-block-button.png) The move form has been designed for flexibility and will automatically hide fields if there's only one option available. For example: - If your selected parent record has only one elemental area relation, the dropdown for selecting an elemental area won't be displayed. - If there are multiple elemental area relations, the dropdown will be available. -![move block form modal](./_images/move-block-modal.png) +![move block form modal](../_images/move-block-modal.png) ### Automatic retries for queued jobs