Adjust breadcrumb navigation structure to the navigation list

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

3 files changed, 14 insertions, 12 deletions

diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js
index 1083be461bb..ed1170b0f59 100644
--- a/apps/files/js/breadcrumb.js
+++ b/apps/files/js/breadcrumb.js
@@ -32,7 +32,7 @@
 	 * the URL of a given breadcrumb
 	 */
 	var BreadCrumb = function(options){
-		this.$el = $('<div class="breadcrumb"></div>');
+		this.$el = $('<nav></nav>');
 		this.$menu = $('<div class="popovermenu menu-center"><ul></ul></div>');
 
 		this.crumbSelector = '.crumb:not(.hidden):not(.crumbhome):not(.crumbmenu)';
@@ -123,12 +123,13 @@
 			var $menuItem;
 			this.$el.empty();
 			this.breadcrumbs = [];
+			var $crumbList = $('<ul class="breadcrumb"></ul>');
 
 			for (var i = 0; i < parts.length; i++) {
 				var part = parts[i];
 				var $image;
 				var $link = $('<a></a>');
-				$crumb = $('<div class="crumb svg"></div>');
+				$crumb = $('<li class="crumb svg"></li>');
 				if(part.dir) {
 					$link.attr('href', this.getCrumbUrl(part, i));
 				}
@@ -149,12 +150,13 @@
 					$link.append($image);
 				}
 				this.breadcrumbs.push($crumb);
-				this.$el.append($crumb);
+				$crumbList.append($crumb);
 				// Only add feedback if not menu
 				if (this.onClick && i !== 0) {
 					$link.on('click', this.onClick);
 				}
 			}
+			this.$el.append($crumbList);
 
 			// Menu creation
 			this._createMenu();
diff --git a/apps/files/tests/js/breadcrumbSpec.js b/apps/files/tests/js/breadcrumbSpec.js
index 52c9f51835e..6bc7eb0a54d 100644
--- a/apps/files/tests/js/breadcrumbSpec.js
+++ b/apps/files/tests/js/breadcrumbSpec.js
@@ -41,7 +41,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
 		});
 		it('Renders its own container', function() {
 			bc.render();
-			expect(bc.$el.hasClass('breadcrumb')).toEqual(true);
+			expect(bc.$el.find("ul").hasClass('breadcrumb')).toEqual(true);
 		});
 		it('Renders root by default', function() {
 			var $crumbs;
@@ -189,7 +189,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
 
 			bc.setDirectory(dummyDir);
 
-			$('div.crumb').each(function(index){
+			$('li.crumb').each(function(index){
 				$(this).css('width', 50);
 				$(this).css('padding', 0);
 				$(this).css('margin', 0);
@@ -248,7 +248,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			paddings = [0, 0, 0, 0, 0, 0, 0, 0];
 			margins = [0, 0, 0, 0, 0, 0, 0, 0];
 
-			$('div.crumb').each(function(index){
+			$('li.crumb').each(function(index){
 				$(this).css('width', widths[index]);
 				$(this).css('padding', paddings[index]);
 				$(this).css('margin', margins[index]);
@@ -302,7 +302,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			// Each element is 20px wider
 			paddings = [10, 10, 10, 10, 10, 10, 10, 10];
 
-			$('div.crumb').each(function(index){
+			$('li.crumb').each(function(index){
 				$(this).css('padding', paddings[index]);
 			});
 
@@ -329,7 +329,7 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			// Each element is 20px wider
 			margins = [10, 10, 10, 10, 10, 10, 10, 10];
 
-			$('div.crumb').each(function(index){
+			$('li.crumb').each(function(index){
 				$(this).css('margin', margins[index]);
 			});
 
diff --git a/apps/files_sharing/src/style/sharebreadcrumb.scss b/apps/files_sharing/src/style/sharebreadcrumb.scss
index f3096f45013..c4853e05165 100644
--- a/apps/files_sharing/src/style/sharebreadcrumb.scss
+++ b/apps/files_sharing/src/style/sharebreadcrumb.scss
@@ -20,15 +20,15 @@
  *
  */
 
-div.crumb span.icon-shared,
-div.crumb span.icon-public {
+li.crumb span.icon-shared,
+li.crumb span.icon-public {
 	display: inline-block;
 	cursor: pointer;
 	opacity: 0.2;
 	margin-right: 6px;
 }
 
-div.crumb span.icon-shared.shared,
-div.crumb span.icon-public.shared {
+li.crumb span.icon-shared.shared,
+li.crumb span.icon-public.shared {
 	opacity: 0.7;
 }