amccollo
commented
3 months ago I've ported this older a11y ticket to the new InvenioRDM a11y project, because it remains an issue.
Some additional detail:
While accordion separators in the upload form do now receive keyboard focus, they do not announce their state (expanded vs. collapsed).
At present, accordions are styled <div> s:
<div class="accordion ui inverted invenio-accordion-field ">
<div tabindex="0" class="active title">Files<i aria-hidden="true" class="angle right icon"></i></div>
<div class="content active">
<div class="ui container">
<div class="ui grid file-uploader">
<div class="row pt-10 pb-5">
<div
class="left floated middle aligned six wide computer sixteen wide mobile six wide tablet column">
<div role="list" class="ui horizontal list">
<div role="listitem" class="item">
<div class="ui checkbox"><input class="hidden" readonly tabindex="0" type="checkbox"
value><label>Metadata-only
record</label></div>
</div>
<div role="listitem" class="item"><i aria-hidden="true"
class="question circle outline icon neutral"></i></div>
</div>
</div>
<div class="ten wide computer sixteen wide mobile ten wide tablet column storage-col">
<div class="ui tiny header mr-10">Storage
available</div>
<div role="list" class="ui horizontal right floated list">
<div role="listitem" class="item">
<div class="ui label">0 out of 100
files</div>
</div>
<div role="listitem" class="item">
<div class="ui label">0 bytes out
of 10.00
GB</div>
</div>
</div>
</div>
</div>
<div class="row pt-0 pb-0">
<div class="sixteen wide column"><span role="button"><input multiple type="file" autocomplete="off"
tabindex="-1" style="display: none;">
<div class="ui basic very padded segment file-upload-area no-files">
<div class="ui center aligned three column grid">
<div class="middle aligned row">
<div class="seven wide computer sixteen wide mobile seven wide tablet column">
<div class="ui small header">Drag and
drop files</div>
</div>
<div
class="two wide computer sixteen wide mobile two wide tablet column mt-10 mb-10">
-
or -</div>
<div class="seven wide computer sixteen wide mobile seven wide tablet column">
<button class="ui icon primary left labeled button" type="button"><i
aria-hidden="true" class="upload icon"></i>Upload
files</button></div>
</div>
</div>
</div>
</span></div>
</div>
<div class="row file-upload-note pt-5">
<div class="sixteen wide column">
<div class="ui visible warning message">
<p><i aria-hidden="true" class="warning sign icon"></i>File addition,
removal or modification are not allowed after
you have published your
upload.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Proper Use of ARIA Roles and Properties
role="button": Each accordion header that can be expanded or collapsed should have a role="button" to convey to assistive technologies that it is interactive.
aria-expanded: This attribute should be used on the accordion headers to indicate whether the associated panel is currently expanded (aria-expanded="true") or collapsed (aria-expanded="false"). This dynamically updates as users interact with the accordion.
aria-controls: The aria-controls attribute should be used on the accordion header to reference the id of the associated content panel. This tells assistive technologies which content is controlled by each button.
The accordion field used in the deposit form needs accessibility (role/aria-attributes, keyboard accessibility). https://github.com/inveniosoftware/react-invenio-forms/blob/master/src/lib/forms/AccordionField.js#L52
See: https://www.w3.org/TR/wai-aria-practices/#accordion and https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
Note: can use the
onTitleClickfunction that comes with semantic UI to update the values. See https://react.semantic-ui.com/modules/accordion/