♻️ REFACTOR: Reduce JS/CSS size and improve accessibility

[foster999]

Removes:

• semantic-ui assets
• unused 'sphinx_tabs_nowarn' sphinx option

Changes:

• tab structure to use tab roles
• tab label colour, to increase contrast with background
• assets are now copied across by sphinx rather than explicitly in the extension

Adds:

• tabindex atributes to allow users to focus and switch tabs using a keyboard (left and right arrows, and enter key to change)
• ARIA labels for tabs and panels
• ability to close tabs panel by clicking open tab
• persistence of last selected group or code tab during the session (when session storage is permitted)
• margin below images inside tab content

Closes #92, closes #66, closes #87, closes #90 and closes #80, closes #65, closes #93.
It also includes an equivalent of #73

[codecov]

Codecov Report

Merging #94 (7d2a1c5) into master (05ddd2c) will increase coverage by 3.98%.
The diff coverage is 96.61%.

@@            Coverage Diff             @@
##           master      #94      +/-   ##
==========================================
+ Coverage   90.04%   94.02%   +3.98%     
==========================================
  Files           1        1              
  Lines         201      201              
==========================================
+ Hits          181      189       +8     
+ Misses         20       12       -8     

Flag	Coverage Δ
pytests	94.02% <96.61%> (+3.98%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
sphinx_tabs/tabs.py	94.02% <96.61%> (+3.98%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 05ddd2c...e5feb59. Read the comment docs.

[foster999]

Quite a large change to the underlying HTML here, so wouldn't be surprised if it introduces bugs for some use cases... Though I've trialed it with the demos in the docs and it seems to work well.

Also worth noting that:

1. Tabs and tab panels will now be focused on clicking, giving them a black outline until another element is focused. This focus highlighting is useful for those navigating by keyboard, so shouldn't be hidden.
2. Navigating across a tablist using arrow keys doesn't currently work if there are next/previous buttons on the page (i.e. jupyter-books), because of an event listener in sphinx's doctools.js triggers the page to change. I've raised a separate PR to disable this when button elements are focused, like those used for tabs here.

Edit: doctools.js is now overwritten with a minor change, so that arrows do not switch page when a button is focused. This should be removed if sphinx-doc/sphinx#8316 gets merged.

[pradyunsg]

Ahoy! As a heads up, I won't be properly reviewing this myself anytime soon (context here) but I definitely wanted to drop in and say -- Thanks a lot for picking this up, and as far as I can see, this looks great!

[foster999]

Hey @chrisjsewell, please could you provide a review of this sometime? I appreciate that there's quite a few changes piled in here, but it made sense to include them given the extent of the rewrite.

If there's nothing obviously broken here I'll be around to pick up any bugs I may have thrown in, if released 😅

[Daltz333]

There seems to be some weird white outline of the tabbed content that just doesn't fit.

[chrisjsewell]

Heya, @Daltz333 I don't want to be too much of a blocker on this package, so I've invited you and @foster999 as maintainers

I've made a quick review comment above also:

It also includes an equivalent of #73

Could you add a note on this to the documentation (https://sphinx-tabs--94.org.readthedocs.build/en/94/#), and in fact it would be good to improve this page with a bit more explanation of the extension, including sphinx configuration options etc

[foster999]

Thanks @chrisjsewell, sounds good to me

I've dropped the sphinx js override and updated the RTD docs to include code examples and describe features. Please could one of you have a quick look at https://sphinx-tabs--94.org.readthedocs.build/en/94/#, then I think it should be good to go 😄

[Daltz333]

Looks fine to me! I think we should ship it if no other objections!

[chrisjsewell]

thanks @foster999 looking good, just a minor thing to change

[chrisjsewell]

cheers!

[chrisjsewell]

I imagine this should be released as v2.0.0

[pradyunsg]

Hurray! Thanks for doing this folks! ^>^

[foster999]

Cheers for the review both! Shall punch a new release now

[chrisjsewell]

I assume you know how: https://github.com/executablebooks/.github/blob/master/CONTRIBUTING.md#the-process-of-creating-a-release