Skip to content

Commit

Permalink
XWIKI-21272: History navigation arrows are not perceived as links and…
Browse files Browse the repository at this point in the history 
… lacking contrast (#2323)

* Replaced the `<` and `>` symbols used for buttons with proper icon theme arrow icons.
* Updated the order of the nodes and structure to fit improvements to the interface
* Updated style to improve usability: action links styled as button, clearer structure of the section, and explicit name on some buttons.
* Fixed tests
* Removed the display arrow
* Replaced titles on 'central' buttons
* Replaced the text content of the 'side' buttons.
* Fixed inconsistent behavior with reverted version numbers
* Escaped titles
* Updated the comment display, this is part of improving the usability of this node, not specifically accessibility
* Updated style of the change info boxes
  • Loading branch information
@Sereza7
Sereza7 authored Oct 17, 2023
1 parent 9bd97fa commit b6080ac
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 70 deletions.
54 changes: 16 additions & 38 deletions ...go-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,76 +357,54 @@ dl.export-tree-legend dt + dd {

// Viewer = changes -----------------------------------------------------------
#changes-info {
background-color: @xwiki-background-secondary-color;
border: @border-width solid @xwiki-border-color;
margin-top: (@grid-gutter-width / 2);
margin-bottom: (@grid-gutter-width / 2);
padding-top: (@grid-gutter-width / 2);
padding-bottom: (@grid-gutter-width / 2);
position: relative;
/* Background arrow */
&:before {
background: @xwiki-page-content-bg;
height: 2em;
right: 50%;
top: 4em;
width: 2em;
}
&:after {
border-bottom: 2em solid transparent;
border-left: 3em solid @xwiki-page-content-bg;
border-top: 2em solid transparent;
left: 50%;
top: 3em;
}
&:before, &:after {
content: "";
display: block;
position: absolute;
}
}

#changes-info-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
column-gap: 5vw;
row-gap: 1vh;
}

.changes-info-box {
flex: 1;
padding: 0 (@main-padding / 2);
}

.changes-info-box, #changes-info-comment {
padding: (@main-padding / 4) (@main-padding / 2);
background-color: @xwiki-background-secondary-color;
border-radius: @border-radius-large;
text-align: center;
}

.changes-info-title {
.h3;
}

@media (max-width: @screen-xs-max) {
#changes-info:before, #changes-info:after {
display: none; /* Hide the arrow for small resolutions */
}
margin-top: 0;
}

.changes-version {
white-space: nowrap;
}

.changes-arrow {
font-size: inherit;
}

.changes-arrow, .changes-arrow-left, .changes-arrow-right {
&, &:hover, &:active, &:visited, &:focus {
color: @xwiki-page-content-bg;
text-decoration: none;
vertical-align: baseline;
font-weight: 700;
}
}

.changes-arrow-left, .changes-arrow-right {
font-size: 7em;
line-height: 1;
#changes-arrows-box {
font-size: 1.5em;
flex-basis: 100%;
display: flex;
justify-content: space-between;
}

.changes-body > .changes-body-header {
Expand Down
17 changes: 13 additions & 4 deletions ...i-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1720,17 +1720,18 @@ web.history.changes.restrictedInfo=For security reasons, at least one of the com
restricted mode as it is not the current version. There may be differences and errors due to this.

core.viewers.diff.title=Changes for page <a href="{1}">{0}</a>
core.viewers.diff.change=From {0} to {1}
core.viewers.diff.from=From version {0}
core.viewers.diff.fromNew=From empty
core.viewers.diff.to=To version {0}
core.viewers.diff.editedBy=edited by {0}
core.viewers.diff.editedOn=on {0}
core.viewers.diff.editComment=Change comment:
core.viewers.diff.noEditComment=There is no comment for this version
core.viewers.diff.nextChange=Next change
core.viewers.diff.previousChange=Previous change
core.viewers.diff.nextVersion=Next version
core.viewers.diff.previousVersion=Previous version
core.viewers.diff.nextVersion.origin=Increase the base version to {0}
core.viewers.diff.previousVersion.origin=Decrease the base version to {0}
core.viewers.diff.nextVersion.target=Increase the target version to {0}
core.viewers.diff.previousVersion.target=Decrease the target version to {0}

core.viewers.code.showBlame=Show last authors
core.viewers.code.hideBlame=Hide last authors
Expand Down Expand Up @@ -5636,6 +5637,14 @@ platform.office.importDocumentOverwriteConfirmation=The target document exists.
#######################################
core.menu.navbar.left.label=Left side of the navigation bar

#######################################
## until 15.9RC1
#######################################
core.viewers.diff.nextVersion=Next version
core.viewers.diff.previousVersion=Previous version
core.viewers.diff.nextChange=Next change
core.viewers.diff.previousChange=Previous change

## Used to indicate where deprecated keys end
#@deprecatedend

Expand Down
6 changes: 3 additions & 3 deletions ...-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/ChangesPane.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
*/
public class ChangesPane extends BaseElement
{
private final static String previousChangeSelector = "#changes-info-boxes > a.changes-arrow-left";
private final static String nextChangeSelector = "#changes-info-boxes > a.changes-arrow-right";
private final static String previousChangeSelector = "#changes-info-boxes > #changes-arrow-boxes > a.changes-arrow-left";
private final static String nextChangeSelector = "#changes-info-boxes > #changes-arrow-boxes > a.changes-arrow-right";
private final static String previousFromVersionSelector = "#changes-info-box-from .changes-arrow:first-child";
private final static String nextFromVersionSelector = "#changes-info-box-from .changes-arrow:last-child";
private final static String previousToVersionSelector = "#changes-info-box-to .changes-arrow:first-child";
Expand Down Expand Up @@ -69,7 +69,7 @@ public class ChangesPane extends BaseElement
/**
* The comment for the to version.
*/
@FindBy(id = "changes-info-comment")
@FindBy(css = "#changes-info-box-to .changes-info-comment")
private WebElement changeComment;

@FindBy(css = "#changes-info-box-to .changes-version a:not(.changes-arrow)")
Expand Down
26 changes: 16 additions & 10 deletions ...wiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/changesdoc.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,44 @@

#if ("$!previousOrigdocVersion" != '')
#set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${previousOrigdocVersion}&rev2=${rev2}")})
#set ($changesTitle = $services.localization.render('core.viewers.diff.previousVersion'))
#set ($previousOrigdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&lt;</a>")
#set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.previousVersion.origin', [${previousOrigdocVersion}])))
#set ($previousOrigdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('left')</a>")
#end
#if ("$!nextOrigdocVersion" != '')
#set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${nextOrigdocVersion}&rev2=${rev2}")})
#set ($changesTitle = $services.localization.render('core.viewers.diff.nextVersion'))
#set ($nextOrigdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&gt;</a>")
#set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.nextVersion.origin', [${nextOrigdocVersion}])))
#set ($nextOrigdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('right')</a>")
#end
#if ("$!previousNewdocVersion" != '')
#set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev1}&rev2=${previousNewdocVersion}")})
#set ($changesTitle = $services.localization.render('core.viewers.diff.previousVersion'))
#set ($previousNewdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&lt;</a>")
#set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.previousVersion.target', [${previousNewdocVersion}])))
#set ($previousNewdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('left')</a>")
#end
#if ("$!nextNewdocVersion" != '')
#set ($changesLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev1}&rev2=${nextNewdocVersion}")})
#set ($changesTitle = $services.localization.render('core.viewers.diff.nextVersion'))
#set ($nextNewdocLink = "<a class='changes-arrow' href='$changesLink' title='$changesTitle'>&gt;</a>")
#set ($changesTitle = $escapetool.xml($services.localization.render('core.viewers.diff.nextVersion.target', [${nextNewdocVersion}])))
#set ($nextNewdocLink = "<a class='btn btn-default changes-arrow' href='$changesLink' title='$changesTitle'>$services.icon.renderHTML('right')</a>")
#end
## Display the previous change arrow only if there is a previous version of the original document and there is no extension version
#if ("$!previousOrigdocVersion" != '' && "$!previousNewdocVersion" != '')
## Keep the reverse navigation order in case the original document version is greater than the version of the new document
#if ($origdoc.RCSVersion.isLessOrEqualThan($newdoc.RCSVersion))
#set ($previousLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${previousOrigdocVersion}&rev2=${rev1}")})
#set ($previousLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$previousOrigdocVersion,$rev1])))
#else
#set ($previousLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev2}&rev2=${previousNewdocVersion}")})
#set ($previousLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$rev2, $previousNewdocVersion])))
#end
#end
## Display the next change arrow only if there is a next version of the new document and there is no extension version
#if ("$!nextOrigdocVersion" != '' && "$!nextNewdocVersion" != '')
## Keep the reverse navigation order in case the original document version is greater than the version of the new document
#if ($origdoc.RCSVersion.isLessOrEqualThan($newdoc.RCSVersion))
#set ($nextLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${rev2}&rev2=${nextNewdocVersion}")})
#set ($nextLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$rev2, $nextNewdocVersion])))
#else
#set ($nextLink = ${xwiki.getURL($tdoc, 'view', "viewer=changes&rev1=${nextOrigdocVersion}&rev2=${rev1}")})
#set ($nextLabel = $escapetool.xml($services.localization.render('core.viewers.diff.change', [$nextOrigdocVersion, $rev1])))
#end
#end

Expand All @@ -66,14 +70,16 @@
'version': $rev1,
'previousVersionLink': $previousOrigdocLink,
'nextVersionLink': $nextOrigdocLink,
'previousLink': $previousLink
'previousLink': $previousLink,
'previousLabel': $previousLabel
})
#set ($to = {
'doc': $newdoc,
'version': $rev2,
'previousVersionLink': $previousNewdocLink,
'nextVersionLink': $nextNewdocLink,
'nextLink': $nextLink
'nextLink': $nextLink,
'nextLabel': $nextLabel
})
#displayDocumentChangesHeader($from $to)

Expand Down
36 changes: 21 additions & 15 deletions ...iki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/diff_macros.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -575,35 +575,41 @@
$services.localization.render('core.viewers.diff.editedOn', [$xwiki.formatDate($targetDoc.date)])
#end
</div> ## changes-info-content
<div class="changes-info-comment">
$escapetool.xml($services.localization.render('core.viewers.diff.editComment'))
#if ("$targetDoc.comment" == '')
$escapetool.xml($services.localization.render('core.viewers.diff.noEditComment'))
#else
$escapetool.xml($targetDoc.comment)
#end
</div> ## changes-info-comment
#end
#end

#macro (displayDocumentChangesHeader $from $to)
<div id="changes-info">
<div id="changes-info-boxes">
#if ("$!from.previousLink" != '')
<a href="$from.previousLink" class="changes-arrow-left"
title="$escapetool.xml($services.localization.render('core.viewers.diff.previousChange'))">&lt;</a>
#if ("$!from.previousLink" != '' || "$!to.nextLink" != '')
<div id='changes-arrows-box'>
#if ("$!from.previousLink" != '')
<a href="$from.previousLink" class="btn btn-default changes-arrow-left">
$services.icon.renderHTML('left') $from.previousLabel
</a>
#end
#if ("$!to.nextLink" != '')
<a href="$to.nextLink" class="btn btn-default changes-arrow-right">
$to.nextLabel $services.icon.renderHTML('right')
</a>
#end
</div>
#end
<div id="changes-info-box-from" class="changes-info-box">
#displayDocumentVersionInfo($from.doc $from.version $from.previousVersionLink $from.nextVersionLink 'core.viewers.diff.from')
</div> ## changes-info-box-from
<div id="changes-info-box-to" class="changes-info-box">
#displayDocumentVersionInfo($to.doc $to.version $to.previousVersionLink $to.nextVersionLink 'core.viewers.diff.to')
</div> ## changes-info-box-to
#if ("$!to.nextLink" != '')
<a href="$to.nextLink" class="changes-arrow-right"
title="$escapetool.xml($services.localization.render('core.viewers.diff.nextChange'))">&gt;</a>
#end
</div> ## changes-info-boxes
<div id="changes-info-comment">
$escapetool.xml($services.localization.render('core.viewers.diff.editComment'))
#if ("$!to.doc.comment" == '')
$escapetool.xml($services.localization.render('core.viewers.diff.noEditComment'))
#else
$escapetool.xml($to.doc.comment)
#end
</div> ## changes-info-comment
</div> ## changes-info
#end

Expand Down

0 comments on commit b6080ac

Please sign in to comment.