This page lists important information for Learnosity customers who are upgrading to the 2023.1.LTS (Long Term Support) version.
On this page:
- Breaking change in the list pagination buttons
- Additional updates
- Breaking change in section behavior
- User interface updates
- User interface updates
- CSS Changes for UI Improvements
Author API
Breaking change in the list pagination buttons
The disabled state for the Item, Activity & Question list pagination (next and previous) buttons is now controlled by the aria-disabled
attribute instead of the disabled
attribute. This change was required for keyboard accessibility reasons to allow the pagination buttons to be focusable while disabled.
Clients who customise these buttons disabled state will need to update their CSS overrides accordingly. An example change can be seen below:
/* Old code (CSS) */
.lrn-pagination-btn:disabled {
background: grey;
}
/* New code (CSS) */
.lrn-pagination-btn[aria-disabled="true"] {
background: grey;
}
Another notable change relates to the applied transition on hover on the said buttons which will now be conditional upon the buttons not being aria-disabled
. Clients who customize the hover transitions should update their CSS overrides accordingly. An example change can be seen below:
/* Old code (SCSS) */
.lrn-pagination-btn[data-authorapi-selector="pagination-next"] {
transition: padding-right .5s;
&:hover {
padding-right: 10px;
color: palevioletred;
}
}
/* New code (SCSS) */
.lrn-pagination-btn[data-authorapi-selector="pagination-next"] {
&:not([aria-disabled="true"]) {
transition: padding-right .5s;
&:hover {
padding-right: 10px;
color: palevioletred;
}
}
}
Author API: additional updates
- Added the ability to add pop-up content to specific Rich Text Editor fields.
- Updated Learnosity Design System components and colours.
- Removed unused CSS rules.
- Updated Author API paginated lists, see migration notes above.
Items API
Breaking change in section behavior
You can now extend section configuration. Previously, when extending a user’s section configuration at the beginning of a test, the configuration of the Activity template would completely override the configuration of the host page upon initializing the Items API. However, the configuration of the Activity template can now undergo a deep merge with the host page’s configuration instead of overwriting it.
Old behavior:
- Previously, the host page’s sections configuration would be completely overriding the host page’s sections, so all of the
activity_template_id
configuration would not be brought over. - Previously, it was necessary to re-write all of the host page’s sections configurations, even those sections that didn’t need to be overridden from the
activity_template_id
. - Previously, it was not possible to target a specific section’s configuration to be overridden.
New behavior:
- Now, the host page’s sections configuration will be deep merged with the
activity_template_id
configuration, so that all the missing configuration or unchanged configuration data will brought over from theactivity_template_id
. - Now, all of the sections configuration from the
activity_template_id
will be brought over to the host page’s configuration, so it's not necessary to re-write them from the host page’s configuration. - Now, you are able to merge a specific section’s configuration by specifying an empty object for the sections array.
1. Activity template configuration:
{
"sections": [{
"config": {
"title": "Section 1",
"time": {
"max_time": 15,
"warning_time": 15
}
},
"items": [{
"id": "Demo3",
"reference": "Demo3"
}]
}, {
"config": {
"title": "Section 2",
"time": {
"max_time": 20,
"limit_type": "hard",
"warning_time": 20
}
},
"items": [{
"id": "Demo5",
"reference": "Demo5"
}]
}]
}
2. Host page configuration:
{
"sections": [{
"config": {
"title": "Client's Section config ",
"time": {
"max_time": 25,
"warning_time": 10
}
},
"items": [{
"id": "Demo4",
"reference": "Demo4"
}]
}]
}
3. Example of how to target the 3rd section to apply some configuration changes:
{
"sections": [
{},
{},
{
"config": {
"title": "Section 3 ",
"time": {
"max_time": 15
}
},
"items": [
"Demo8"
]
}
]
}
Question Editor API
- Added padding to the preview to avoid content being cut off.
- Added spacing around the popup content widget.
Questions API
- Fixed UI problems in "Label image with drag & drop" which caused the drag and drop handle to disappear in certain cases.
- Improved Hotspot UI for selections and hover states.
- Added support for creating popup content.
- Improved line reader keyboard interactions for better accessibility.
All APIs
CSS Changes for UI Improvements
Below is a summary of all CSS changes between the previous LTS release and this release. Generally, these changes contain new feature implementations and various accessibility improvements.
See all CSS changes between v2022.3.LTS and v2023.1.LTS in GitHub