Merge pull request #1240 from bryceosterhaus/LPD-43532

fix(alloy-ui): Use aria attributes in calendar event popup triggers, use tabIndex in popup
liferay · Dec 19, 2024 · 30c1281 · 30c1281
2 parents 688fd71 + ba845d7
commit 30c1281
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 5 deletions.
diff --git a/third-party/projects/alloy-ui/.alloy.json b/third-party/projects/alloy-ui/.alloy.json
@@ -2,5 +2,5 @@
 	"alloycore": ["aui-base-core"],
 	"alloyregex": "(aui|yui(",
 	"yuiversion": "patched-v3.20.6",
-	"version": "3.1.0-deprecated.125"
+	"version": "3.1.0-deprecated.126"
 }
diff --git a/third-party/projects/alloy-ui/bower.json b/third-party/projects/alloy-ui/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "alloy-ui",
-	"version": "3.1.0-deprecated.125",
+	"version": "3.1.0-deprecated.126",
 	"homepage": "http://alloyui.com",
 	"authors": ["Eduardo Lundgren <[email protected]>"],
 	"description": "AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications",

diff --git a/third-party/projects/alloy-ui/package.json b/third-party/projects/alloy-ui/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "alloy-ui",
 	"description": "AlloyUI",
-	"version": "3.1.0-deprecated.125",
+	"version": "3.1.0-deprecated.126",
 	"author": {
 		"name": "Eduardo Lundgren",
 		"email": "[email protected]",

diff --git a/third-party/projects/alloy-ui/src/aui-scheduler/js/aui-scheduler-base-event.js b/third-party/projects/alloy-ui/src/aui-scheduler/js/aui-scheduler-base-event.js
@@ -357,7 +357,7 @@ var SchedulerEvent = A.Component.create({
         'colorSaturationFactor', 'titleDateFormat', 'visible', 'disabled'],
 
     prototype: {
-        EVENT_NODE_TEMPLATE: '<div class="' + CSS_SCHEDULER_EVENT + '" tabindex="0">' + '<div class="' +
+        EVENT_NODE_TEMPLATE: '<div aria-expanded="false" aria-haspopup="dialog" class="' + CSS_SCHEDULER_EVENT + '" tabindex="0">' + '<div class="' +
             CSS_SCHEDULER_EVENT_TITLE +
             '"></div>' + '<div class="' + CSS_SCHEDULER_EVENT_CONTENT + '"></div>' +
             '<div class="' + CSS_SCHEDULER_EVENT_NAME + '"></div>' +

diff --git a/third-party/projects/alloy-ui/src/aui-scheduler/js/aui-scheduler-event-recorder.js b/third-party/projects/alloy-ui/src/aui-scheduler/js/aui-scheduler-event-recorder.js
@@ -329,6 +329,7 @@ var SchedulerEventRecorder = A.Component.create({
 
             if (selectedEvent) {
                 selectedEvent.focus();
+                selectedEvent.setAttribute('aria-expanded', false);
             }
         },
 
@@ -394,6 +395,10 @@ var SchedulerEventRecorder = A.Component.create({
                 points: align.points
             });
 
+            instance._selectedEvent = node;
+
+            node.setAttribute('aria-expanded', true);
+
             popover.show();
 
             popover.headerNode.focus();
@@ -722,6 +727,7 @@ var SchedulerEventRecorder = A.Component.create({
             instance.formNode.on('submit', A.bind(instance._onSubmitForm, instance));
 
             instance.popover.get('boundingBox').addClass(CSS_SCHEDULER_EVENT_RECORDER_POP_OVER);
+            instance.popover.get('boundingBox').setAttribute('tabindex', -1);
             instance.popover.get('contentBox').wrap(instance.formNode);
 
             schedulerBB.on('clickoutside', A.bind(instance._handleClickOutSide, instance));

diff --git a/third-party/projects/alloy-ui/src/aui-scheduler/js/aui-scheduler-view-agenda.js b/third-party/projects/alloy-ui/src/aui-scheduler/js/aui-scheduler-view-agenda.js
@@ -67,7 +67,7 @@ var Lang = A.Lang,
 
     TPL_EVENTS_CONTAINER = '<div class="' + CSS_EVENTS + '">{content}</div>',
 
-    TPL_EVENT = '<div class="' + [CSS_EVENT, CSS_CLEARFIX].join(' ') +
+    TPL_EVENT = '<div aria-expanded="false" aria-haspopup="dialog" class="' + [CSS_EVENT, CSS_CLEARFIX].join(' ') +
         ' {firstClassName} {lastClassName} {eventClassName}" data-clientId="{clientId}">' +
         '<div class="' + CSS_EVENT_COLOR + '" style="background-color: {color};"></div>' +
         '<div class="' + CSS_EVENT_CONTENT + '">{content}</div>' +