Skip to content

Commit

Permalink
FLUID-5682: Expanded the use of aria attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jobara
jobara committed Oct 5, 2015
1 parent 9b53bea commit 02eb7a2
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 48 deletions.
29 changes: 20 additions & 9 deletions src/components/slidingPanel/js/SlidingPanel.js
View file
Expand Up @@ -27,7 +27,8 @@ var fluid_2_0 = fluid_2_0 || {};
},
strings: {
showText: "show",
hideText: "hide"
hideText: "hide",
panelLabel: "panel"
},
events: {
onPanelHide: null,
Expand All @@ -45,14 +46,7 @@ var fluid_2_0 = fluid_2_0 || {};
listener: "{that}.applier.modelChanged.addListener",
args: ["isShowing", "{that}.refreshView"]
},
"onCreate.setAriaControls":{
"this": "{that}.dom.toggleButton",
"method": "attr",
"args": {
"role": "button",
"aria-controls": "{that}.panelId"
}
},
"onCreate.setAriaProps": "{that}.setAriaProps",
"onCreate.setInitialState": {
listener: "{that}.refreshView"
},
Expand Down Expand Up @@ -118,6 +112,10 @@ var fluid_2_0 = fluid_2_0 || {};
funcName: "fluid.slidingPanel.setAriaStates",
args: ["{that}", "{that}.model.isShowing"]
},
setAriaProps: {
funcName: "fluid.slidingPanel.setAriaProperties",
args: ["{that}", "{that}.panelId"]
},
togglePanel: {
funcName: "fluid.slidingPanel.togglePanel",
args: ["{that}"]
Expand All @@ -141,6 +139,19 @@ var fluid_2_0 = fluid_2_0 || {};
that.events[that.model.isShowing ? "onPanelShow" : "onPanelHide"].fire();
};

// panelId is passed in to ensure that it is evaluated before this
// function is called.
fluid.slidingPanel.setAriaProperties = function (that, panelId) {
that.locate("toggleButton").attr({
"role": "button",
"aria-controls": panelId
});
that.locate("panel").attr({
"aria-label": that.options.strings.panelLabel,
"role": "group"
});
};

fluid.slidingPanel.setAriaStates = function (that, isShowing) {
that.locate("toggleButton").attr("aria-pressed", isShowing);
that.locate("panel").attr("aria-expanded", isShowing);
Expand Down
8 changes: 6 additions & 2 deletions src/framework/preferences/js/SeparatedPanelPrefsEditor.js
View file
Expand Up @@ -74,7 +74,8 @@ var fluid_2_0 = fluid_2_0 || {};
gradeNames: ["fluid.prefs.msgLookup"],
strings: {
showText: "{that}.msgLookup.slidingPanelShowText",
hideText: "{that}.msgLookup.slidingPanelHideText"
hideText: "{that}.msgLookup.slidingPanelHideText",
panelLabel: "{that}.msgLookup.slidingPanelPanelLabel"
},
invokers: {
operateShow: {
Expand Down Expand Up @@ -237,7 +238,10 @@ var fluid_2_0 = fluid_2_0 || {};
// which is a child of this component

var separatedPanelId = separatedPanel.slidingPanel.panelId;
separatedPanel.locate("reset").attr("aria-controls", separatedPanelId);
separatedPanel.locate("reset").attr({

This comment has been minimized.

Sign in to view

Copy link
@cindyli

cindyli Oct 5, 2015

Shall this change be in prefsEditor.js, on fluid.prefs.prefsEditor component, so the aria attributes for the reset button can apply to all instances that use prefsEditorLoader, such as full page versions in the infusion repo.

This comment has been minimized.

Sign in to view

Copy link
@michelled

michelled Nov 19, 2015

@cindyli in the full page versions, the reset is an actual html 'button'. I don't think we will gain anything by adding an addition 'role' attribute of 'button'. What do you think?

This comment has been minimized.

Sign in to view

Copy link
@cindyli

cindyli Nov 20, 2015

I agree the reset in our default full page template is an html "button" where the aria role is not necessary. However, all default templates are overridable, such as PMT is using a full page version but has its own look and feel. That means, the reset potentially can be implemented in any form, but it performs as a button. I was thinking it might be better to use aria roles to reinforce the semantics. I'm open to leave out the button role so users can control it when needed.
"aria-controls": separatedPanelId,
"role": "button"
});

separatedPanel.slidingPanel.events.afterPanelShow.addListener(function () {
fluid.prefs.separatedPanel.updateView(prefsEditor);
Expand Down
3 changes: 2 additions & 1 deletion src/framework/preferences/messages/prefsEditor.json
View file
@@ -1,4 +1,5 @@
{
"slidingPanelShowText": "+ Show Display Preferences",
"slidingPanelHideText": "- Hide"
"slidingPanelHideText": "- Hide",
"slidingPanelPanelLabel": "User Prefrences"
}
43 changes: 23 additions & 20 deletions tests/component-tests/slidingPanel/js/SlidingPanelTests.js
View file
Expand Up @@ -17,7 +17,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
$(document).ready(function () {
jqUnit.module("SlidingPanel Tests");

fluid.registerNamespace("fluid.tests");
fluid.registerNamespace("fluid.tests.slidingPanel");

fluid.tests.createSlidingPanel = function (options) {
var commonOptions = {
Expand All @@ -38,33 +38,36 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
return fluid.slidingPanel(".flc-slidingPanel", $.extend(true, commonOptions, options));
};

fluid.tests.slidingPanel.assertAria = function (that, state) {
var button = that.locate("toggleButton");
var panel = that.locate("panel");

jqUnit.assertEquals("Show/hide button has the button role", "button", button.attr("role"));
jqUnit.assertEquals("Show/hide button has correct aria-pressed", state, button.attr("aria-pressed"));
jqUnit.assertEquals("Show/hide button has correct aria-controls", panel.attr("id"), button.attr("aria-controls"));
jqUnit.assertEquals("Panel has the group role", "group", panel.attr("role"));
jqUnit.assertEquals("Panel has the correct aria-label", that.options.strings.panelLabel, panel.attr("aria-label"));
jqUnit.assertEquals("Panel has correct aria-expanded", state, panel.attr("aria-expanded"));
};

jqUnit.test("Test Init", function () {
jqUnit.expect(3);
jqUnit.expect(7);
var slidingPanel = fluid.tests.createSlidingPanel();
jqUnit.assertTrue("The sliding panel is initialised", slidingPanel);

var toggleButtonAriaPressedState = slidingPanel.locate("toggleButton").attr("aria-pressed");
var ariaExpandedState = slidingPanel.locate("panel").attr("aria-expanded");

jqUnit.assertEquals("Show/hide button has correct aria-pressed", "false", toggleButtonAriaPressedState);
jqUnit.assertEquals("Panel has correct aria-expanded", "false", ariaExpandedState);
jqUnit.assertTrue("The sliding panel is initialised", slidingPanel);
fluid.tests.slidingPanel.assertAria(slidingPanel, "false");
});

jqUnit.asyncTest("Show Panel", function () {
jqUnit.expect(5);
jqUnit.expect(8);
var slidingPanel = fluid.tests.createSlidingPanel();
slidingPanel.events.afterPanelShow.addListener(function () {
jqUnit.assertEquals("Show panel", "block", slidingPanel.locate("panel").css("display"));
jqUnit.assertEquals("Show panel button text", slidingPanel.options.strings.hideText, slidingPanel.locate("toggleButton").text());

var toggleButtonAriaControlsState = slidingPanel.locate("toggleButton").attr("aria-controls");
var toggleButtonAriaPressedState = slidingPanel.locate("toggleButton").attr("aria-pressed");
var panelId = slidingPanel.panelId;
var ariaExpandedState = slidingPanel.locate("panel").attr("aria-expanded");
var toggleButton = slidingPanel.locate("toggleButton");
var panel = slidingPanel.locate("panel");

jqUnit.assertEquals("Show/hide button has correct aria-controls", toggleButtonAriaControlsState, panelId);
jqUnit.assertEquals("Show/hide button has correct aria-pressed", "true", toggleButtonAriaPressedState);
jqUnit.assertEquals("Panel has correct aria-expanded", "true", ariaExpandedState);
jqUnit.assertEquals("Show panel", "block", panel.css("display"));
jqUnit.assertEquals("Show panel button text", slidingPanel.options.strings.hideText, toggleButton.text());
fluid.tests.slidingPanel.assertAria(slidingPanel, "true");

jqUnit.start();
});
Expand Down Expand Up @@ -118,4 +121,4 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
});

});
})(jQuery);
})(jQuery);
42 changes: 26 additions & 16 deletions tests/framework-tests/preferences/js/SeparatedPanelPrefsEditorTests.js
View file
Expand Up @@ -82,6 +82,27 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
return pageEnhancer.uiEnhancer;
};

fluid.tests.assertAriaForButton = function (button, buttonName, controlsId) {
jqUnit.assertEquals(buttonName + " button has the button role", "button", button.attr("role"));
jqUnit.assertEquals(buttonName + " button has correct aria-controls", controlsId, button.attr("aria-controls"));
};

fluid.tests.assertAriaForToggleButton = function (button, buttonName, controlsId, state) {
fluid.tests.assertAriaForButton(button, buttonName, controlsId);
jqUnit.assertEquals(buttonName + " button has correct aria-pressed", state, button.attr("aria-pressed"));
};

fluid.tests.assertAria = function (that, state) {
var toggleButton = that.locate("toggleButton");
var panel = that.locate("panel");
var panelId = panel.attr("id");

fluid.tests.assertAriaForToggleButton(toggleButton, "Hide/show", panelId, state);
jqUnit.assertEquals("Panel has the group role", "group", panel.attr("role"));
jqUnit.assertEquals("Panel has the correct aria-label", that.options.strings.panelLabel, panel.attr("aria-label"));
jqUnit.assertEquals("Panel has correct aria-expanded", state, panel.attr("aria-expanded"));
};

fluid.tests.testSeparatedPanel = function (separatedPanel) {
jqUnit.assertEquals("IFrame is invisible and keyboard inaccessible", false, separatedPanel.iframeRenderer.iframe.is(":visible"));
fluid.tests.prefs.assertPresent(separatedPanel, fluid.tests.prefs.expectedSeparatedPanel);
Expand All @@ -90,11 +111,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
jqUnit.assertEquals("Reset button is invisible", false, $(".flc-prefsEditor-reset").is(":visible"));
fluid.tests.prefs.assertPresent(prefsEditor, fluid.tests.prefs.expectedComponents["fluid.prefs.separatedPanel"]);

var toggleButtonAriaPressedState = separatedPanel.slidingPanel.locate("toggleButton").attr("aria-pressed");
var ariaExpandedState = separatedPanel.locate("iframe").attr("aria-expanded");

jqUnit.assertEquals("Show/hide button has correct aria-pressed", "false", toggleButtonAriaPressedState);
jqUnit.assertEquals("Panel has correct aria-expanded", "false", ariaExpandedState);
fluid.tests.assertAria(separatedPanel.slidingPanel, "false");
fluid.tests.assertAriaForButton(separatedPanel.locate("reset"), "Reset", separatedPanel.slidingPanel.panelId);
};

fluid.tests.afterShowFunc1 = function (separatedPanel) {
Expand All @@ -104,16 +122,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
fluid.tests.prefs.checkModelSelections("enhancerModel from bwSkin", fluid.tests.prefs.bwSkin.preferences, enhancerModel);
jqUnit.assertEquals("Reset button is visible", true, $(".flc-prefsEditor-reset").is(":visible"));

var resetButtonAriaControlsState = separatedPanel.locate("reset").attr("aria-controls");
var toggleButtonAriaControlsState = separatedPanel.slidingPanel.locate("toggleButton").attr("aria-controls");
var toggleButtonAriaPressedState = separatedPanel.slidingPanel.locate("toggleButton").attr("aria-pressed");
var panelId = separatedPanel.slidingPanel.panelId;
var ariaExpandedState = separatedPanel.locate("iframe").attr("aria-expanded");

jqUnit.assertEquals("Reset button has correct aria-controls", resetButtonAriaControlsState, panelId);
jqUnit.assertEquals("Show/hide button has correct aria-controls", toggleButtonAriaControlsState, panelId);
jqUnit.assertEquals("Show/hide button has correct aria-pressed", "true", toggleButtonAriaPressedState);
jqUnit.assertEquals("Panel has correct aria-expanded", "true", ariaExpandedState);
fluid.tests.assertAria(separatedPanel.slidingPanel, "true");
fluid.tests.assertAriaForButton(separatedPanel.locate("reset"), "Reset", separatedPanel.slidingPanel.panelId, "true");
};
};

Expand Down Expand Up @@ -154,7 +164,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
modules: [{
name: "Separated panel integration tests",
tests: [{
expect: 29,
expect: 38,
name: "Separated panel integration tests",
sequence: [{
listener: "fluid.tests.testSeparatedPanel",
Expand Down

0 comments on commit 02eb7a2

Please sign in to comment.