ENH - Theme improvements to the PyData Sphinx theme (colour and focus)

[trallard]

📝 Summary

Related to #8

• A colour contrast check was done by @scmmmh and determined it was best to work on a cohesive colour system for the theme, which will lead to:
  • Adaptable theming - dark and light
  • Improved maintainability
  • Better out-of-the-box colour contrast conformance (Meet WCAG SC 1.4.3 - contrast AA)
• While working on the colour system, additional design and UX interaction had been done to help with other WCAG criteria

Acceptance Criteria

• WCAG SC 1.4.3 - text contrast AA
  • 4.5:1 ratio for text and background (text < 18pt or bold text < 14pt)
  • 3:1 ratio for text and background (text >= 18pt or bold text =< 14pt)
• Focus visible criteria - buttons, links, and navigation components meet at least WCAG 2.1 (designs account for changes in WCAG 2.2
  • WCAG 2.1 SC 2.4.7
• WCAG SC 1.4.11 - non-text contrast AA need a minimum 3:1 contrast ratio with adjacent colours
  • link underline
  • focus styles
  • buttons and badges
  • icons
  • dropdowns
• WCAG SC 1.4.1 - use of colour
  • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element

Tasks

Beta Give feedback

1. Generate design system proposals (See tracking issue in the PyData Sphinx theme repository)
2. Decide on a path forward (select proposal)
3. Implement changes in the PyData Sphinx theme and update documentation as needed - colour #22
   area: PyData-Sphinx area: accessibility ♿ team: quansight-labs type: task 📌 +4
   
4. Test/audit implementation for colour contrast #24
   2 of 2
   area: PyData-Sphinx area: accessibility ♿ mission: access-centred ♿ team: quansight-labs type: enhancement 💅🏼 +5
   
5. FOCUS - PyData Sphinx enhancements and documentation #27
   15 of 18
   area: PyData-Sphinx area: UI/UX 🎨 area: accessibility ♿ mission: access-centred ♿ +4
   
6. ENH - Update icons style to meet criteria 1.4.1 #31
   area: accessibility ♿ +1
   

🔗 Additional links

• Currently tracked in Colour improvements to themes - create a scalable and accessible design system pydata/pydata-sphinx-theme#1079
• Accessible current page navigation
• Tips for focus styles
• Focusing on focus styles
• Accessible icons links
• Inclusive components
• Unambiguous click menu
• CSS and JS a11y best practices
• A guide to accessible focus indicators