Skip to content

Commit

Permalink
SAK-46486 Profile: Improve Accessibility for Edit Buttons (sakaiproje…
Browse files Browse the repository at this point in the history 
…ct#10157)
  • Loading branch information
@V100X
V100X authored Jan 19, 2022
1 parent b416bec commit 0889c55
Show file tree
Hide file tree
Showing 19 changed files with 512 additions and 787 deletions.
184 changes: 90 additions & 94 deletions library/src/morpheus-master/sass/modules/tool/profile2/_profile2.scss
View file

Large diffs are not rendered by default.

123 changes: 53 additions & 70 deletions profile2/tool/src/java/org/sakaiproject/profile2/tool/pages/MyProfile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,81 +18,64 @@
-->

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
xml:lang="en"
lang="en">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
xml:lang="en"
lang="en">

<body>
<wicket:extend>

<div id="pageWrapper" class="container-fluid">
<div class="row">
<div id="leftPanel" class="col-md-3">
<div id="myPhoto">
<img wicket:id="photo" />
<a href="#" wicket:id="changePictureLink" class="edit-image-button"><span wicket:id="changePictureLabel">Change picture</span></a>
</div>

<div wicket:id="changePicture"></div>

<ul id="sideLink" wicket:id="sideLinks">
<li wicket:id="addFriendContainer"><a wicket:id="addFriendLink" class="connection-add"><span wicket:id="addFriendLabel">[addFriendLabel]</span></a></li>
<li wicket:id="lockProfileContainer"><a wicket:id="lockProfileLink" class="locked"><span wicket:id="lockProfileLabel">[lockProfileLabel]</span></a></li>
</ul>

<div wicket:id="addFriendWindow"></div>

<!-- kudos -->
<div class="side-widget" wicket:id="myKudos" />
<!-- friends feed -->
<div class="side-widget" wicket:id="friendsFeed" />
<!-- gallery feed -->
<div class="side-widget" wicket:id="galleryFeed" />

</div>

<div id="mainPanel" class="col-md-6">

<!-- heading/status panel -->
<div wicket:id="myStatusPanel">[my status panel]</div>

<!-- messages -->
<span class="alertMessage" wicket:id="feedbackPanel" style="clear:none;">[feedback panel]</span>

<!-- tabs -->
<div class="main-profile-tabpanel" wicket:id="myProfileTabs">[my profile tabs]</div>
<div class="row">

<div id="leftPanel" class="col-md-3">
<div id="myPhoto">
<img wicket:id="photo" />
<a href="#" wicket:id="changePictureLink" class="edit-image-button" role="button">
<span wicket:id="changePictureLabel">Change picture</span>
</a>
</div>

<div wicket:id="changePicture" />

<ul id="sideLink" wicket:id="sideLinks">
<li wicket:id="addFriendContainer">
<a wicket:id="addFriendLink" class="connection-add">
<span wicket:id="addFriendLabel">[addFriendLabel]</span>
</a>
</li>
<li wicket:id="lockProfileContainer">
<a wicket:id="lockProfileLink" class="locked">
<span wicket:id="lockProfileLabel">[lockProfileLabel]</span>
</a>
</li>
</ul>

<div wicket:id="addFriendWindow" />
<!-- kudos -->
<div class="side-widget" wicket:id="myKudos" />
<!-- friends feed -->
<div class="side-widget" wicket:id="friendsFeed" />
<!-- gallery feed -->
<div class="side-widget" wicket:id="galleryFeed" />
</div>

<div id="mainPanel" class="col-md-6">
<!-- heading/status panel -->
<div wicket:id="myStatusPanel">[my status panel]</div>

<!-- messages -->
<span class="alertMessage" wicket:id="feedbackPanel" style="clear:none;">[feedback panel]</span>

<!-- tabs -->
<div class="main-profile-tabpanel" wicket:id="myProfileTabs">[my profile tabs]</div>
</div>

<div id="rightPanel" class="col-md-3" />
</div>

<div id="rightPanel" class="col-md-3"></div>


</div>
</div>

<!-- general MyProfile scripting - for individual panel stuff, see the panels themselves -->
<script type="text/javascript">

//init
$(document).ready(function(){

//hide edit buttons
$(".edit-button").addClass("offscreen");
$(".edit-image-button").addClass("offscreen");

//on hover over the profile image, show the edit link
$("#myPhoto").hover(
function () {
$(this).children(".edit-image-button").removeClass("offscreen");
},
function () {
$(this).children(".edit-image-button").addClass("offscreen");
}
);
});
</script>


</wicket:extend>
</body>
</html>

87 changes: 31 additions & 56 deletions profile2/tool/src/java/org/sakaiproject/profile2/tool/pages/panels/MyBusinessDisplay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,68 +19,43 @@
-->

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
xml:lang="en" lang="en">
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.3-strict.dtd"
xml:lang="en" lang="en">

<body>

<wicket:panel>


<div class="mainSection editable">
<div class="mainSectionHeading"><span wicket:id="heading">[Business
Information]</span></div>

<a href="#" wicket:id="editButton" class="edit-button">
<span wicket:id="editButtonLabel">edit</span>
<span class="offscreen">
<wicket:message key="accessibility.edit.business" />
</span>
</a>

<div class="mainSectionContent"><!-- message if no fields filled in -->
<span wicket:id="noFieldsMessage" class="profile_instruction">No fields</span>

<!-- business biography -->
<table class="profileContent" wicket:id="businessBiographyContainer">
<tr>
<td class="label" wicket:id="businessBiographyLabel">[businessBiographyLabel]</td>
<td class="content" wicket:id="businessBiography">[businessBiography]</td>
</tr>
</table>
<!-- company profiles -->
<table class="profileContent" wicket:id="companyProfilesContainer">
<tr>
<td class="label" wicket:id="companyProfilesLabel">[companyProfilesLabel]</td>
</tr>
<tr>
<td class="company-profile-tabpanel" wicket:id="companyProfiles">[companyProfiles]</td>
</tr>
</table>
<div class="mainSectionHeading">
<span wicket:id="heading">[Business Information]</span>
</div>

<a href="#" wicket:id="editButton" class="edit-button" role="button">
<span wicket:id="editButtonLabel">edit</span>
</a>

<div class="mainSectionContent"><!-- message if no fields filled in -->
<span wicket:id="noFieldsMessage" class="profile_instruction">No fields</span>

<!-- business biography -->
<table class="profileContent" wicket:id="businessBiographyContainer">
<tr>
<td class="label" wicket:id="businessBiographyLabel">[businessBiographyLabel]</td>
<td class="content" wicket:id="businessBiography">[businessBiography]</td>
</tr>
</table>
<!-- company profiles -->
<table class="profileContent" wicket:id="companyProfilesContainer">
<tr>
<td class="label" wicket:id="companyProfilesLabel">[companyProfilesLabel]</td>
</tr>
<tr>
<td class="company-profile-tabpanel" wicket:id="companyProfiles">[companyProfiles]</td>
</tr>
</table>
</div>
</div>
</div>

<!-- panel specific Javascript -->
<script type="text/javascript">

//force hide on init
$(".edit-button").addClass("offscreen");

//show the edit button when hovering over an editable section
$(document).ready(function(){
$(".editable").hover(
function () {
$(this).children(".edit-button").removeClass("offscreen");
},
function () {
$(this).children(".edit-button").addClass("offscreen");
}
);
});
</script>

</wicket:panel>


</body>
</html>
</html>
48 changes: 19 additions & 29 deletions profile2/tool/src/java/org/sakaiproject/profile2/tool/pages/panels/MyBusinessDisplay.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.extensions.ajax.markup.html.tabs.AjaxTabbedPanel;
import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
import org.apache.wicket.extensions.markup.html.tabs.ITab;
Expand All @@ -48,7 +49,7 @@ public class MyBusinessDisplay extends Panel {

@SpringBean(name="org.sakaiproject.profile2.logic.SakaiProxy")
private SakaiProxy sakaiProxy;

public MyBusinessDisplay(final String id, final UserProfile userProfile) {
super(id);

Expand All @@ -67,24 +68,19 @@ public MyBusinessDisplay(final String id, final UserProfile userProfile) {
addEditButton(id, userProfile);

// no fields message
Label noFieldsMessage = new Label("noFieldsMessage", new ResourceModel(
"text.no.fields"));
Label noFieldsMessage = new Label("noFieldsMessage", new ResourceModel("text.no.fields"));
add(noFieldsMessage);
if (visibleFieldCount > 0) {
noFieldsMessage.setVisible(false);
}
}

private int addBusinessBiography(final UserProfile userProfile,
int visibleFieldCount) {
private int addBusinessBiography(final UserProfile userProfile, int visibleFieldCount) {

WebMarkupContainer businessBiographyContainer = new WebMarkupContainer(
"businessBiographyContainer");
businessBiographyContainer.add(new Label("businessBiographyLabel",
new ResourceModel("profile.business.bio")));
businessBiographyContainer.add(new Label("businessBiography",
ProfileUtils.processHtml(userProfile.getBusinessBiography()))
.setEscapeModelStrings(false));
WebMarkupContainer businessBiographyContainer = new WebMarkupContainer("businessBiographyContainer");
businessBiographyContainer.add(new Label("businessBiographyLabel", new ResourceModel("profile.business.bio")));
businessBiographyContainer.add(new Label("businessBiography", ProfileUtils.processHtml(userProfile.getBusinessBiography()))
.setEscapeModelStrings(false));
add(businessBiographyContainer);

if (StringUtils.isBlank(userProfile.getBusinessBiography())) {
Expand All @@ -97,19 +93,17 @@ private int addBusinessBiography(final UserProfile userProfile,

private int addCompanyProfiles(final UserProfile userProfile,
int visibleFieldCount) {

WebMarkupContainer companyProfilesContainer = new WebMarkupContainer(
"companyProfilesContainer");

companyProfilesContainer.add(new Label("companyProfilesLabel",
new ResourceModel("profile.business.company.profiles")));

WebMarkupContainer companyProfilesContainer = new WebMarkupContainer("companyProfilesContainer");

companyProfilesContainer.add(new Label("companyProfilesLabel",
new ResourceModel("profile.business.company.profiles")));

List<ITab> tabs = new ArrayList<ITab>();

if (null != userProfile.getCompanyProfiles()) {

for (final CompanyProfile companyProfile : userProfile
.getCompanyProfiles()) {
for (final CompanyProfile companyProfile : userProfile.getCompanyProfiles()) {

tabs.add(new AbstractTab(new ResourceModel("profile.business.company.profile")) {

Expand All @@ -127,8 +121,8 @@ public Panel getPanel(String panelId) {

companyProfilesContainer.add(new AjaxTabbedPanel("companyProfiles", tabs));
add(companyProfilesContainer);
if (0 == tabs.size()) {

if (0 == tabs.size()) {
companyProfilesContainer.setVisible(false);
} else {
visibleFieldCount++;
Expand All @@ -138,8 +132,7 @@ public Panel getPanel(String panelId) {
}

private void addEditButton(final String id, final UserProfile userProfile) {
AjaxFallbackLink editButton = new AjaxFallbackLink("editButton",
new ResourceModel("button.edit")) {
AjaxFallbackLink editButton = new AjaxFallbackLink("editButton", new ResourceModel("button.edit")) {

private static final long serialVersionUID = 1L;

Expand All @@ -152,12 +145,10 @@ public void onClick(AjaxRequestTarget target) {
// resize iframe
target.appendJavaScript("setMainFrameHeight(window.name);");
}

}

};
editButton.add(new Label("editButtonLabel", new ResourceModel(
"button.edit")));
editButton.add(new Label("editButtonLabel", new ResourceModel("button.edit")));
editButton.add(new AttributeModifier("aria-label", new ResourceModel("accessibility.edit.business")));
editButton.setOutputMarkupId(true);

if (userProfile.isLocked() && !sakaiProxy.isSuperUser()) {
Expand All @@ -166,5 +157,4 @@ public void onClick(AjaxRequestTarget target) {

add(editButton);
}

}
Loading

0 comments on commit 0889c55

Please sign in to comment.