Align prev/next without pseudo-element

[jonels-msft]

Fixes https://github.com/readthedocs/sphinx_rtd_theme/issues/951

Slightly uglier HTML, and an asymmetry in the float attribute between buttons, but should remove an extra stop in a screenreader.

[stsewd]

From the PR preview, it looks like this, I think maybe because you need to re-generate the assets? https://sphinx-rtd-theme.readthedocs.io/en/latest/contributing.html#making-changes (npm run build)

[jonels-msft]

@stsewd hm, I did view it locally with npm run dev and resized the window to test how it behaved. Maybe it's a browser difference. I tested on Chrome 90.

I'll try floating the left button too, since looks like it's clearing the other button.

[stsewd]

@stsewd hm, I did view it locally with npm run dev and resized the window to test how it behaved. Maybe it's a browser difference. I tested on Chrome 90.

I'll try floating the left button too, since looks like it's clearing the other button.

I meant that you need to commit the changed files from npm run build to be able to review it from the preview https://sphinx-rtd-theme--1152.org.readthedocs.build/en/1152/

[Blendify]

My main concern here is flex compatibility issues with older browsers. I am working on a auto prefixer to add browser css extensions automatically. Once I get that patch in we can move forward with using flex in more places.

[jonels-msft]

@Blendify fair point about compatibility. How far back are we looking at for browser support? If I'm reading it right, https://caniuse.com/flexbox shows full support in firefox 28 (seven years ago), and chrome 21 (nine years ago).

Some context behind this PR. The linked bug in the description is part of a set of accessibility issues that our organization must fix by July 1 in our docs system. What's the timeline for your auto-prefixer patch? Is there a shim I can use for flexbox in the meantime?

[Blendify]

Is there a shim I can use for flexbox in the meantime?

Yes, using display: -ms-flexbox should be sufficient.

[jonels-msft]

@Blendify thanks for the tip! How does this look?

[Blendify]

This blog can explain it better than I can quickly: https://www.thoughtco.com/css-vendor-prefixes-3466867

[Blendify]

@agjohnson can you test this on older IE browsers?

[benjaoming]

I've pushed this to 2.0 - in this release, we could drop old browser support and merge this PR without having to test it :)