DOM contains duplicated HTML elements

[saschaszott]

A request to the DSpace app start page ( /home) results in a DOM that contains some HTML elements twice (marked red and green in the screenshot below)

In consequence the ds-auth-nav-menu element is rendered twice which results in duplicated input elements email and password (if password authentication is enabled). At least in this case the reason for element duplication is not the support of a small-width version of the page as the small-width version redirects to /login when you click the log-in button in the navigation bar.

Currently it is not clear if this issue affects the site performance.

[tdonohue]

Flagged as an accessibility issue as this is the cause of several "id attribute value must be unique" issues (because the id is duplicated in these duplicate elements) which were previously noted in #1174 and #1184.

I believe this bug is also reproducible easily in our e2e tests, and it's the reason why we skip accessibility scanning of parts of the header: https://github.com/DSpace/dspace-angular/blob/main/cypress/e2e/header.cy.ts#L13-L16

Pulled this over to the 7.6.x maintenance board in search of a volunteer to investigate a way to avoid this HTML element duplication.

[mwoodiupui]

I ran into this in a report from SiteImprove (which has been visited upon our sites by corporate IT). I think it happens because <ds-themed-navbar></ds-themed-navbar> appears in both src/themes/dspace/app/header/header.component.html and src/app/header-nav-wrapper/header-navbar-wrapper.component.html. But I'm not sure which should contain it.

[tdonohue]

@mwoodiupui : Oh weird, you are correct.. that's a big red flag:

• https://github.com/DSpace/dspace-angular/blob/main/src/app/header-nav-wrapper/header-navbar-wrapper.component.html#L3
• https://github.com/DSpace/dspace-angular/blob/main/src/themes/dspace/app/header/header.component.html#L23

I suspect it should NOT be in the "dspace" theme file (the last one)... as the header-navbar-wrapper.component.html (first one) already includes the ds-themed-header (which should cause the header.component.html to get loaded).

I have no idea why it's in two places. That is probably the problem here.

There's three options then:

• Try removing it from the dspace theme and see if that fixes things
• OR, try and move it from the header-navbar-wrapper into the default /src/app/header/header.component.html (i.e. change default custom theme to better align with what the dspace theme is doing)
• OR, maybe the dspace theme should also be overriding the default header-navbar-wrapper to remove it from that location, since the theme wants it to appear in a different location.

I won't have time to try this out myself, but I suspect the solution may be in one of those three options (not sure which is best yet -- it may require some testing to first understand why it is in a different place in just the dspace theme).

[mwoodiupui]

OK, I'm going to try removing it from our custom theme's header.component.html and see what happens. (I had copied the dspace theme's version so ours has the same issue.)

[davide-negretti]

I am refactoring the whole header as part of #2656, which also fixes this issue.

[tdonohue]

Ported to 7.x in #2858