Merge pull request #37929 from nextcloud/enh/a11y-create-new-label

Create new file/folder labels

apps/files/js/newfilemenu.js

@@ -51,6 +51,7 @@
 				templateName: t('files', 'New folder'),
 				iconClass: 'icon-folder',
 				fileType: 'folder',
+				actionLabel: t('files', 'Create new folder'),
 				actionHandler: function(name) {
 					self.fileList.createDirectory(name);
 				}
@@ -112,10 +113,12 @@
 
 			var newName = $target.attr('data-templatename');
 			var fileType = $target.attr('data-filetype');
+			var actionLabel = $target.attr('data-action-label');
 			var $form = $(OCA.Files.Templates['newfilemenu_filename_form']({
 				fileName: newName,
 				cid: this.cid,
-				fileType: fileType
+				fileType: fileType,
+				actionLabel,
 			}));
 
 			//this.trigger('actionPerformed', action);
@@ -207,6 +210,7 @@
 				iconClass: actionSpec.iconClass,
 				fileType: actionSpec.fileType,
 				useInput: actionSpec.useInput,
+				actionLabel: actionSpec.actionLabel,
 				actionHandler: actionSpec.actionHandler,
 				checkFilename: actionSpec.checkFilename,
 				shouldShow: actionSpec.shouldShow,

apps/files/js/templates.js

@@ -344,10 +344,12 @@ templates['newfilemenu'] = template({"1":function(container,depth0,helpers,parti
     + alias4(((helper = (helper = lookupProperty(helpers,"fileType") || (depth0 != null ? lookupProperty(depth0,"fileType") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"fileType","hash":{},"data":data,"loc":{"start":{"line":7,"column":84},"end":{"line":7,"column":96}}}) : helper)))
     + "\" data-action=\""
     + alias4(((helper = (helper = lookupProperty(helpers,"id") || (depth0 != null ? lookupProperty(depth0,"id") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data,"loc":{"start":{"line":7,"column":111},"end":{"line":7,"column":117}}}) : helper)))
+    + "\" data-action-label=\""
+    + alias4(((helper = (helper = lookupProperty(helpers,"actionLabel") || (depth0 != null ? lookupProperty(depth0,"actionLabel") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actionLabel","hash":{},"data":data,"loc":{"start":{"line":7,"column":138},"end":{"line":7,"column":153}}}) : helper)))
     + "\"><span class=\"icon "
-    + alias4(((helper = (helper = lookupProperty(helpers,"iconClass") || (depth0 != null ? lookupProperty(depth0,"iconClass") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconClass","hash":{},"data":data,"loc":{"start":{"line":7,"column":137},"end":{"line":7,"column":150}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"iconClass") || (depth0 != null ? lookupProperty(depth0,"iconClass") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconClass","hash":{},"data":data,"loc":{"start":{"line":7,"column":173},"end":{"line":7,"column":186}}}) : helper)))
     + " svg\"></span><span class=\"displayname\">"
-    + alias4(((helper = (helper = lookupProperty(helpers,"displayName") || (depth0 != null ? lookupProperty(depth0,"displayName") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"displayName","hash":{},"data":data,"loc":{"start":{"line":7,"column":189},"end":{"line":7,"column":204}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"displayName") || (depth0 != null ? lookupProperty(depth0,"displayName") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"displayName","hash":{},"data":data,"loc":{"start":{"line":7,"column":225},"end":{"line":7,"column":240}}}) : helper)))
     + "</span></a>\n		</li>\n";
 },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
@@ -379,7 +381,9 @@ templates['newfilemenu_filename_form'] = template({"compiler":[8,">= 4.3.0"],"ma
     + alias4(((helper = (helper = lookupProperty(helpers,"fileType") || (depth0 != null ? lookupProperty(depth0,"fileType") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"fileType","hash":{},"data":data,"loc":{"start":{"line":2,"column":26},"end":{"line":2,"column":38}}}) : helper)))
     + "\" type=\"text\" value=\""
     + alias4(((helper = (helper = lookupProperty(helpers,"fileName") || (depth0 != null ? lookupProperty(depth0,"fileName") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"fileName","hash":{},"data":data,"loc":{"start":{"line":2,"column":59},"end":{"line":2,"column":71}}}) : helper)))
-    + "\" autocomplete=\"off\" autocapitalize=\"off\">\n	<input type=\"submit\" value=\" \" class=\"icon-confirm\" />\n</form>\n";
+    + "\" autocomplete=\"off\" autocapitalize=\"off\">\n	<input type=\"submit\" value=\" \" class=\"icon-confirm\" aria-label=\""
+    + alias4(((helper = (helper = lookupProperty(helpers,"actionLabel") || (depth0 != null ? lookupProperty(depth0,"actionLabel") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actionLabel","hash":{},"data":data,"loc":{"start":{"line":3,"column":65},"end":{"line":3,"column":80}}}) : helper)))
+    + "\" />\n</form>\n";
 },"useData":true});
 templates['operationprogressbar'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {

apps/files/js/templates/newfilemenu.handlebars

@@ -4,7 +4,7 @@
 	</li>
 	{{#each items}}
 		<li>
-			<a href="#" class="menuitem" data-templatename="{{templateName}}" data-filetype="{{fileType}}" data-action="{{id}}"><span class="icon {{iconClass}} svg"></span><span class="displayname">{{displayName}}</span></a>
+			<a href="#" class="menuitem" data-templatename="{{templateName}}" data-filetype="{{fileType}}" data-action="{{id}}" data-action-label="{{actionLabel}}"><span class="icon {{iconClass}} svg"></span><span class="displayname">{{displayName}}</span></a>
 		</li>
 	{{/each}}
 </ul>

apps/files/js/templates/newfilemenu_filename_form.handlebars

@@ -1,4 +1,4 @@
 <form class="filenameform">
 	<input id="{{cid}}-input-{{fileType}}" type="text" value="{{fileName}}" autocomplete="off" autocapitalize="off">
-	<input type="submit" value=" " class="icon-confirm" />
+	<input type="submit" value=" " class="icon-confirm" aria-label="{{actionLabel}}" />
 </form>

apps/files/src/templates.js

@@ -80,6 +80,7 @@ window.addEventListener('DOMContentLoaded', function() {
 					templateName: t('files', 'Templates'),
 					iconClass: 'icon-template-add',
 					fileType: 'file',
+					actionLabel: t('files', 'Create new templates folder'),
 					actionHandler(name) {
 						initTemplatesFolder(name)
 						menu.removeMenuEntry('template-init')
@@ -109,6 +110,7 @@ templates.forEach((provider, index) => {
 				templateName: provider.label + provider.extension,
 				iconClass: provider.iconClass || 'icon-file',
 				fileType: 'file',
+				actionLabel: provider.actionLabel,
 				actionHandler(name) {
 					TemplatePicker.open(name, provider)
 				},

lib/public/Files/Template/TemplateFileCreator.php

@@ -37,6 +37,10 @@ final class TemplateFileCreator implements \JsonSerializable {
 	protected $iconClass;
 	protected $ratio = null;
 	protected $order = 100;
+	/**
+	 * @since 27.0.0
+	 */
+	protected string $actionLabel;
 
 	/**
 	 * @since 21.0.0
@@ -103,6 +107,21 @@ public function getOrder(): int {
 		return $this->order;
 	}
 
+	/**
+	 * @since 27.0.0
+	 */
+	public function setActionLabel(string $actionLabel): TemplateFileCreator {
+		$this->actionLabel = $actionLabel;
+		return $this;
+	}
+
+	/**
+	 * @since 27.0.0
+	 */
+	public function getActionLabel(): string {
+		return $this->actionLabel;
+	}
+
 	/**
 	 * @since 21.0.0
 	 */
@@ -113,7 +132,8 @@ public function jsonSerialize(): array {
 			'extension' => $this->fileExtension,
 			'iconClass' => $this->iconClass,
 			'mimetypes' => $this->mimetypes,
-			'ratio' => $this->ratio
+			'ratio' => $this->ratio,
+			'actionLabel' => $this->actionLabel,
 		];
 	}
 }