[A11Y] Citation "region" role does not have a label

[israelcefrin]

Issue Description

Elements with a "region" role must have a label that describes the purpose of the region. This information helps people using assistive technologies to find and navigate the region.
The citation component ("How to cite") does not have any description to help assistive technology users to understand what is being shown or updated in the citation box.

How to reproduce / Current behavior

1. Access an article landing page of a Journal using Immersion theme: https://ojs34.demo.publicknowledgeproject.org/index.php/immersion/article/view/919
2. Inspect the "citation box" under "How to cite"
3. Notice that id="citationOutput" region has a aria-live attribute but is missing a aria-label or aria-labelledby.

What application are you using?

OJS version 3.4

Stack

• Device: Laptop
• OS: MacOS Sequoia
• Browser: Chrome

Testing method

• Method: Manual, Browser Plugin

Action

To fix it, add an id to the Heading "How to Cite" and use this id as reference with aria-labelledby on the component.
E.g.:

<h2 id="howtocite">How to Cite</h2>
...
<div id="citationOutput" role="region" aria-live="polite" aria-labelledby="howtocite">
...

Additional information