Last modified: 2014-07-07 11:40:56 UTC
Created attachment 12275 [details] Demonstration of CSS pseudo-element generated brackets wrapping an edit link. At present section edit links are wrapped by brackets in the HTML content, like so: <span class="mw-editsection">[<a href="/w/index.php?title=Talk:Example&action=edit&section=1" title="Edit section: Example">edit</a>]</span> This makes the links difficult to restyle effectively (for example, I have several links in the interface appearing as buttons) because the end result will always be cluttered by the brackets. I propose replacing the brackets in HTML with brackets generated by CSS pseudo-elements, as in the attached demonstration. This would allow stylesheet authors to remove them if desired. It could also allow a new preference setting for users to hide the brackets if they don't like them. Considerations: - Accessibility: screen readers don't, to my knowledge, understand generated content. As a result, this change would actually improve the accessibility of MediaWiki to visually-impaired users by eliminating the problem described at http://blind.wikia.com/wiki/Mediawiki_and_Accessibility#Section_title_and_edit_link of hearing "left bracket edit right bracket link". - Browser support: generally very good. http://caniuse.com/#feat=css-gencontent However, versions of IE prior to 8 do not support generated content. I don't know what our policy is regarding supporting older versions of Internet Explorer.
As is the way of these things, I naturally found a workaround immediately after filing this bug. The existing brackets can be hidden using CSS, as follows: .mw-editsection { visibility: hidden; } .mw-editsection a { visibility: visible; } However, this is something of a kludge, and I still think it would be better to specify them in CSS as outlined above.
(In reply to comment #0) > - Browser support: generally very good. > http://caniuse.com/#feat=css-gencontent > However, versions of IE prior to 8 do not support generated content. I don't > know what our policy is regarding supporting older versions of Internet > Explorer. Per https://www.mediawiki.org/wiki/Compatibility#Browser we still kind of support IE6 and 7. Making it not work on them would certainly cause various en.wp dinosaurs to shout at me, so I didn't do that.
Thanks Bartosz - I thought that was probably the case. I guess a better question for me to ask would be, do we do any conditional comment stuff to serve up specific stylesheets to older versions of IE? That doesn't directly impact upon this suggestion, I guess, but it will be useful for me to bear in mind when filing future bugs.
(In reply to comment #3) > do we do any conditional comment stuff to > serve up specific stylesheets to older versions of IE? Monobook includes conditional stylesheets for IE6 and IE7, Vector and other skins don't (they do use some pure CSS hacks, though). I was wondering if it would be viable to wrap each bracket itself in <span class=mw-editsection-bracket />?
Changing the summary to "Make brackets in section edit links accessible to CSS", as due to IE6 issues mentioned above, as well as CSS-less accessibility, I believe pseudoelement selectors are not the best way to do this. I'll implement my suggestion above shortly.
Related URL: https://gerrit.wikimedia.org/r/64365 (Gerrit Change Id27555c6dee250eafeefa97ae8927438fd65b8d7)
Thanks Bartosz. If IE6/7 ever become such an antique that we stop supporting them (we can dream can't we?) then I'll come back to this to suggest going the pseudoelement route.
(In reply to comment #7) > Thanks Bartosz. If IE6/7 ever become such an antique that we stop supporting > them (we can dream can't we?) then I'll come back to this to suggest going > the > pseudoelement route. I wonder whether we can stop supporting older IE with JavaScript disabled? In this way we can just bundle stuff like https://code.google.com/p/ie7-js/ and use whatever we like.
Change 64365 merged by jenkins-bot: Make brackets in section edit links accessible to CSS https://gerrit.wikimedia.org/r/64365
Yay, merged. Scott, after 1.22 is released (or already right now if you use the bleeding edge version) you can just use `.mw-editsection-bracket { display: none; }` to hide the brackets entirely and be able to style the section edit links on your own. I'm pretty sure replacing those with CSS pseudoelements will have to wait a few more years ;)
