In the Minerva skin, sections are collapsed by default on mobile devices, however, this information is not conveyed to screen-readers. When tabbing through sections, all that people using a screen-reader hear is the name of the section, with no indication that the section is collapsed and can be expanded to reveal more content.
Compare the current behaviour to another website like apple.com, where the collapsed sections are announced to screen-readers (on Safari, MacOS desktop)
| Demo video | Collapsed state | expanded state |
| -------------- | ------------------------------------------------------------ | ------ |
| [[ https://drive.google.com/file/d/15UFbDvsCX_nTnsQePWtZ-90hzr2EQR93/view?usp=sharing | m.wikipedia.org demo video ]] | Heading level 2 //heading name//, clickable | press heading level 2, //heading name// |
| [[ https://drive.google.com/file/d/1m0loXwYq7s4eiZBA6lkiz1XqI1OVSUqG/view?usp=sharing | apple.com demo video ]] | //heading name//, **collapsed**, button | //heading name//, **expanded**, button |
Note that screen-readers vary widely in their verbosity level and what is read aloud.
On iOS for example, section headings are read as:
"//heading name//, Heading level 2, **table start**" and then "Edit, Heading level 2, link, **table end**"
[[ https://drive.google.com/file/d/14umQuAVd3axrlbp6jVnm8Q4Hatz1apxb/view?usp=sharing | iOS demo video ]]
The headings are not inside a table, but they’re interpreted as such because `display: table;` is used in the CSS. The word “clickable” is also omitted on iOS, which leaves no indication that the heading contains any content. Announcing the CSS table might be a bug in Safari, but it might still be worth replacing the `display:table` layout with something more… **flex**ible :wink:
### Developer notes
**ARIA attribute changes**
[x] Remove the erroneously placed `aria-expanded` attribute from the section //content//, which exists in [Toggler.js#153](https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/e6fbdf4ddef0bbf8502b00bf3463c45b92d82d53/src/mobile.startup/Toggler.js#L153). **Added in c8d446be9164 in 2013.**
[x] Remove the `aria-pressed` attribute. This is meant for toggle-buttons like checkboxes or radios.
[x] Remove the `aria-haspopup="true"` (meant for modals or popup-menus) from the section heading. The `aria-expanded` should suffice.
[x] Add the `aria-expanded="true/false"` attribute to the section heading.
**HTML Changes**
The heading should be announced as a button, but if we add `role=button` then the heading might loose it's semantic value as a heading (i.e. I might not be announced when you ask the screen-reader to read all the headings on the page).
Therefore the heading should contain a button inside it. Something like this:
```lang=html
<h2 class="section-heading collapsible-heading...">
<toggle-arrow/>
<button aria-expanded="false" aria-controls="content-id">Section heading text</button>
<edit-icon/>
</h2>
<div id="content-id">...</div>
```
**CSS Changes**
The button element will have to be "invisible" to non-screen-readers, and the article below provides a handy tip on how to make that happen:
```lang=css
h2 button {
all: inherit;
}
```
As to the announcement of CSS tables, a newer flex-box-based layout might be more appropriate for these headings.
This article https://inclusive-components.design/collapsible-sections/ provides a good overview of how collapsible sections should behave.
### Acceptance Criteria
- [ ] When tabbing through sections with a screen-reader, the screen-reader should say “expanded” or “collapsed” for each section. This is achieved with the `aria-expanded` attribute.
- [ ] The section headings should also also announce themselves as buttons.
- [ ] When collapsing or expanding a section with a screen-reader, the reader should announce the new state of the section.
### Stretch goals
- [ ] Section heading should not be announced as tables.
QA should prioritize Android or iOS for this behaviour, since mobile devices have sections collapsed by default.