Background
After several spikes and cross team discussion evaluating multiple solutions to the broken rotor, we have identified the best path forward. We will implement by removing the button role from the .mw-heading div and will make the toggle icon a button. See example before and after markup below.
Current markup:
<section aria-labelledby="Section_title"> <div class="mw-heading" role="button" tabindex="0" aria-controls="section-body" aria-expanded="false" > <span class="mf-icon" aria-hidden="true"></span> <h2 id="Section_title">Title</h2> <span class="mw-editsection">...</span> </div> <div id="section-body" hidden="until-found">…section body…</div> </section>
New markup:
<section aria-labelledby="Section_title"> <div class="mw-heading" > <h2 id="Section_title">Title</h2> <button class="mf-icon" aria-labelledby="Section_title"></button> <span class="mw-editsection">...</span> </div> <div hidden="until-found">…section body…</div> </section>
For code review be sure to add @KSarabia-WMF from Reader Growth and the ‘ctt-review’ or ‘ctt-attention’ hashtag on gerrit for C. Scott's review.
Note: Markup changes will make DiscussionTools unit tests fail. Reach out to Editing for how to update their tests. This is an automated process.
Requirements
- button role and other related attributes are removed from the .mw-heading div
- the collapse button should be hidden with JS disabled
- the mf-icon is no longer aria-hidden and is converted into a <button>
- mf-icon button is placed after h2 in the marker but visually placed before via CSS
- test that duplicate aria-labelledby on <section> and <button> works fine
- cached HTML is accounted for
- functionality is tested across iOS and Android and with as many screen readers as possible
- DiscussionTools tests are updated (not necessary according to Editing)
Acceptance criteria
- Headings are navigable via rotor on iOS and Android
- DiscussionTools' markers continue working as expected
- When navigating through the page, the collapse icon button gets read to assistive technology after the heading
- Assistive technology users can easily toggle collapsed sections
- Screen reader should not be overly verbose.
- The icon loads late, ensure there is no repaint/reflow
- Collapsed sections load and work well on slow connections
Screen Reader Testing
For maximum confidence, it would be great if we could check the following screen reader / browser combinations on mobile
- Talkback + Chrome ✅ verified
- Talkback + Samsung Internet
- Talkback + Firefox
- VoiceOver + Safari ✅ (Verified on iPhone Air iOS 26.4.2)
- VoiceOver + Chrome ✅ (Verified on iPhone Air iOS 26.4.2)
- VoiceOver + Firefox ✅ (Verified on iPhone Air iOS 26.4.2)