From 7ea43df4f716826e4020df158a932d1576123e4a Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Fri, 3 Mar 2023 13:51:17 -0800
Subject: [PATCH] Add label and switch ocdialog close button to button element

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 core/src/jquery/css/jquery.ocdialog.scss | 6 ++++--
 core/src/jquery/ocdialog.js              | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/core/src/jquery/css/jquery.ocdialog.scss b/core/src/jquery/css/jquery.ocdialog.scss
index 8755e1d7a749c..1911dd29dc48a 100644
--- a/core/src/jquery/css/jquery.ocdialog.scss
+++ b/core/src/jquery/css/jquery.ocdialog.scss
@@ -50,8 +50,10 @@
 
 .oc-dialog-close {
 	position: absolute;
-	top: 0;
-	right: 0;
+	width: 44px !important;
+	height: 44px !important;
+	top: 4px;
+	right: 4px;
 	padding: 25px;
 	background: var(--icon-close-dark) no-repeat center;
 	opacity: .5;
diff --git a/core/src/jquery/ocdialog.js b/core/src/jquery/ocdialog.js
index c8ea065d3c082..9ba54d868c377 100644
--- a/core/src/jquery/ocdialog.js
+++ b/core/src/jquery/ocdialog.js
@@ -177,7 +177,8 @@ $.widget('oc.ocdialog', {
 			break
 		case 'closeButton':
 			if (value) {
-				const $closeButton = $('<a class="oc-dialog-close" tabindex="0"></a>')
+				const $closeButton = $('<button class="oc-dialog-close"></button>')
+				$closeButton.attr('aria-label', t('core', 'Close "{dialogTitle}" dialog', { dialogTitle: this.$title || this.options.title }))
 				this.$dialog.prepend($closeButton)
 				$closeButton.on('click keydown', function(event) {
 					if (isA11yActivation(event)) {