♻️ REFACTOR: Reduce JS/CSS size and improve accessibility (#94)

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

Author: foster999

MANIFEST.in

@@ -15,6 +15,5 @@ include LICENSE
 include README.md
 include CHANGELOG.md
 
-include sphinx_tabs/tabs.js
-include sphinx_tabs/tabs.css
-recursive-include sphinx_tabs/semantic-ui-2.4.1 *
+recursive-include sphinx_tabs *.css
+recursive-include sphinx_tabs *.js

README.md

@@ -73,10 +73,14 @@ Basic tabs can be coded as follows:
 
 ![Tabs](/images/tabs.gif)
 
+The contents of each tab can be displayed by clicking on the tab that you wish to show. Clicking on the tab that is currently open will hide the tab's content, leaving only the tab set labels visible.
+
+Alternatively, tab sets can be focused using :kbd:`Tab`. The :kbd:`Left Arrow` and :kbd:`Right Arrow` keys can then be used to navigate across the tab set and :kbd:`Enter` can be used to select a tab.
+
 ## Grouped Tabs
 
-Tabs can be grouped, so that changing the current tab in one area changes the current tab in the
-another area. For example:
+Tabs can be grouped, so that changing the current tab in one tabset changes the current tab in all other tabsets containing a tab with a matching label.
+For example:
 
 ```rst
 .. tabs::
@@ -110,9 +114,12 @@ another area. For example:
 
 ![Group Tabs](/images/groupTabs.gif)
 
+If permitted by the user's browser, the last selected group tab will be remembered when changing page. As such, if any tabsets on the next page contain a tab with the same label it will be selected.
+
+
 ## Code Tabs
 
-Grouped tabs containing code areas with syntax highlighting can be created as follows:
+Grouped tabs containing code with syntax highlighting can be created as follows:
 
 ```rst
 .. tabs::
@@ -152,9 +159,11 @@ Grouped tabs containing code areas with syntax highlighting can be created as fo
          END PROGRAM main
 ```
 
-Code tabs also support custom lexers (added via sphinx `conf.py`).
+![Code Tabs](/images/codeTabs.gif)
+
+Code tabs also support custom lexers (added via sphinx `conf.py`). Pass the lexers alias as the first argument of `code-tab`.
 
-By default, code tabs are labelled with the language name, though can be provided with custom labels like so:
+By default, code tabs are labelled with the language name, though a custom label can be provided as an optional second argument to the `code-tabs` directive:
 
 ```rst
 .. tabs::
@@ -172,8 +181,7 @@ By default, code tabs are labelled with the language name, though can be provide
 
 ```
 
-
-![Code Tabs](/images/codeTabs.gif)
+The tab label is used to group tabs, including `code-tabs`. As such, the same custom label should be used to group related tabs.
 
 [github-ci]: https://github.com/executablebooks/sphinx-tabs/workflows/continuous-integration/badge.svg?branch=master
 [github-link]: https://github.com/executablebooks/sphinx-tabs

docs/conf.py

@@ -1,4 +1,4 @@
-project = "sphinx-tabs demo"
+project = "sphinx-tabs"
 master_doc = "index"
 source_suffix = ".rst"
 extensions = ["sphinx_tabs.tabs"]