Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions en/08_Changelogs/6.2.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,21 @@ title: 6.2.0 (unreleased)

</details>

## 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).

Expand All @@ -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.
Expand All @@ -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 `<details>` and `<summary>` elements for the expand/collapse functionality and a `<dl>` list instead of a `<ul>` 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.

Expand All @@ -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.

Expand All @@ -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.
Expand All @@ -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}

Expand Down
40 changes: 20 additions & 20 deletions en/08_Changelogs/beta/6.2.0-beta1.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,23 +64,21 @@ A full list of module versions included in CMS Recipe 6.2.0-beta1 is provided be

</details>

## 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).

Expand All @@ -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.
Expand All @@ -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 `<details>` and `<summary>` elements for the expand/collapse functionality and a `<dl>` list instead of a `<ul>` 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.

Expand All @@ -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.

Expand All @@ -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}

Expand All @@ -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

Expand Down