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>

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;

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'));

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) {

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>

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");
 	}