AccordionField: needs voice-over accessibility

[jennur]

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 onTitleClick function that comes with semantic UI to update the values.
See https://react.semantic-ui.com/modules/accordion/

[amccollo]

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.