Fix participant items being focusable

The participant items were link elements, so they were taken into
account in keyboard navigation. However, although it is possible to
interact with some of its children, it is not possible to interact
with the participant item as a whole, so they should not be focusable.
As the link in the participant items led nowhere they are now simple
span elements instead of links.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

5 files changed, 12 insertions, 12 deletions

diff --git a/css/style.scss b/css/style.scss
index 81234e51b..c9c375731 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -709,7 +709,7 @@ input[type="password"] {
 }
 
 .participantWithList .participant-offline {
-	& > a {
+	& > span {
 		color: var(--color-text-maxcontrast);
 	}
 	.avatar {
@@ -723,7 +723,7 @@ input[type="password"] {
 	box-sizing: border-box;
 }
 
-.participantWithList > li > a {
+.participantWithList > li > span {
 	display: block;
 	width: 100%;
 	line-height: 44px;
diff --git a/js/views/participantlistview.js b/js/views/participantlistview.js
index c42ab31c9..f61ef016c 100644
--- a/js/views/participantlistview.js
+++ b/js/views/participantlistview.js
@@ -134,8 +134,8 @@
 
 				if (OC.getCurrentUser().uid && model.get('userId') &&
 					model.get('userId') !== OC.getCurrentUser().uid) {
-					this.$el.find('.participant-entry-link .avatar').contactsMenu(
-						model.get('userId'), 0, this.$el.find('.participant-entry-link'));
+					this.$el.find('.participant-entry .avatar').contactsMenu(
+						model.get('userId'), 0, this.$el.find('.participant-entry'));
 				}
 
 				this.$el.attr('data-session-id', this.model.get('sessionId'));
diff --git a/js/views/templates.js b/js/views/templates.js
index d3993caef..fdd716750 100644
--- a/js/views/templates.js
+++ b/js/views/templates.js
@@ -294,11 +294,11 @@ templates['participantlistview'] = template({"1":function(container,depth0,helpe
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "<a class=\"participant-entry-link\" href=\"#\" data-sessionId=\""
+  return "<span class=\"participant-entry\" data-sessionId=\""
     + alias4(((helper = (helper = helpers.sessionId || (depth0 != null ? depth0.sessionId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"sessionId","hash":{},"data":data}) : helper)))
-    + "\">\n	<div class=\"avatar\"></div>\n	"
+    + "\">\n	<div class=\"avatar\"></div>\n	<span>"
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
-    + "\n	"
+    + "</span>\n	"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.participantIsOwner : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n	"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.participantIsModerator : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
@@ -306,7 +306,7 @@ templates['participantlistview'] = template({"1":function(container,depth0,helpe
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.participantIsGuestModerator : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n	"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.inCall : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "\n</a>\n"
+    + "\n</span>\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.canModerate : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"useData":true});
 templates['participantview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/views/templates/participantlistview.handlebars b/js/views/templates/participantlistview.handlebars
index 86063eac1..7bc8e1592 100644
--- a/js/views/templates/participantlistview.handlebars
+++ b/js/views/templates/participantlistview.handlebars
@@ -1,11 +1,11 @@
-<a class="participant-entry-link" href="#" data-sessionId="{{sessionId}}">
+<span class="participant-entry" data-sessionId="{{sessionId}}">
 	<div class="avatar"></div>
-	{{name}}
+	<span>{{name}}</span>
 	{{#if participantIsOwner}}<span class="participant-moderator-indicator">{{moderatorIndicator}}</span>{{/if}}
 	{{#if participantIsModerator}}<span class="participant-moderator-indicator">{{moderatorIndicator}}</span>{{/if}}
 	{{#if participantIsGuestModerator}}<span class="participant-moderator-indicator">{{moderatorIndicator}}</span>{{/if}}
 	{{#if inCall}}<span class="icon icon-video"></span>{{/if}}
-</a>
+</span>
 {{#if canModerate}}
 <div class="participant-entry-utils">
 	<ul>
diff --git a/tests/acceptance/features/bootstrap/ParticipantListContext.php b/tests/acceptance/features/bootstrap/ParticipantListContext.php
index 111307a59..6e640684e 100644
--- a/tests/acceptance/features/bootstrap/ParticipantListContext.php
+++ b/tests/acceptance/features/bootstrap/ParticipantListContext.php
@@ -57,7 +57,7 @@ class ParticipantListContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function itemInParticipantsListFor($participantName) {
-		return Locator::forThe()->xpath("//a/text()[normalize-space() = '$participantName']/..")->
+		return Locator::forThe()->xpath("//span/span[normalize-space() = '$participantName']/../..")->
 				descendantOf(self::participantsList())->
 				describedAs("Item for $participantName in the participants list");
 	}