BloodHound icon indicating copy to clipboard operation
BloodHound copied to clipboard

feat: Far-reaching accessibility changes BED-5690

Open dcairnsspecterops opened this issue 2 months ago • 1 comments

Description

This PR adds accessibility support by 1) addressing all issues on all pages discovered by the axe accessibility scanner devtools, 2) adds a linter to enforce good accessibility practices in the future: eslint-plugin-jsx-a11y.

Screenshot below detail the Before (right) and After (left) state using Axe devtools for accessibility scanning.

Stubborn issues:

  • Cypher syntax highlighter: I used CSS filter to increase the color saturation, which I think makes the color contrast accessible. We might need at adjust the cypher editor syntax highlighting theme manually. Presumably we'll want design input on this.
  • Nested interactive elements in Summary Card (table row is a button, and there's a button inside that button, which confuses screen readers.
TODO: This is inaccessible nesting of a <button> inside an <a> tag. 
We need to reconsider this design if we want more accessible UI.
https://dequeuniversity.com/rules/axe/4.6/nested-interactive
https://specterops.atlassian.net/browse/BED-5689

Note: NPM audit calls my package changes safe, save for this: image

Accessibility issues After // Before

Screenshot 2025-11-03 at 10 34 44 AM Screenshot 2025-11-03 at 10 35 01 AM Screenshot 2025-11-03 at 10 35 17 AM Screenshot 2025-11-03 at 11 04 33 AM Screenshot 2025-11-03 at 11 05 46 AM Screenshot 2025-11-03 at 11 06 03 AM Screenshot 2025-11-03 at 11 06 25 AM Screenshot 2025-11-03 at 11 06 38 AM Screenshot 2025-11-03 at 11 06 55 AM Screenshot 2025-11-03 at 11 33 18 AM Screenshot 2025-11-03 at 11 36 02 AM Screenshot 2025-11-03 at 11 36 21 AM Screenshot 2025-11-03 at 11 36 40 AM Screenshot 2025-11-03 at 11 39 08 AM Screenshot 2025-11-03 at 11 39 30 AM Screenshot 2025-11-03 at 11 40 09 AM Screenshot 2025-11-03 at 11 40 26 AM Screenshot 2025-11-03 at 11 41 17 AM Screenshot 2025-11-03 at 11 41 33 AM Screenshot 2025-11-03 at 11 42 31 AM Screenshot 2025-11-03 at 11 46 26 AM Screenshot 2025-11-03 at 11 47 15 AM Screenshot 2025-11-03 at 12 07 38 PM Screenshot 2025-11-03 at 12 08 53 PM Screenshot 2025-11-03 at 12 37 35 PM Screenshot 2025-11-03 at 12 37 58 PM Screenshot 2025-11-03 at 12 38 24 PM Screenshot 2025-11-03 at 12 38 54 PM Screenshot 2025-11-03 at 12 39 14 PM Screenshot 2025-11-03 at 12 39 55 PM Screenshot 2025-11-03 at 12 40 23 PM Screenshot 2025-11-03 at 12 41 44 PM Screenshot 2025-11-03 at 12 42 09 PM Screenshot 2025-11-03 at 12 42 24 PM Screenshot 2025-11-03 at 12 43 50 PM

Major changes addressed

  • the absence of keyDown listeners, tabIndex, and role="button" on our clickable elements
  • color contrast issues
  • adding aria labels to elements without language

Motivation and Context

Resolves BED-5690

Why is this change required? What problem does it solve?

How Has This Been Tested?

Please describe in detail how you tested your changes. Include details of your testing environment, and the tests you ran to see how your change affects other areas of the code, etc.

Screenshots (optional):

Types of changes

  • Chore (a change that does not modify the application functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Database Migrations

Checklist:

  • [ ] I have met the contributing prerequisites
    • Assigned myself to this PR
    • Added the appropriate labels
    • Associated an issue: https://github.com/SpecterOps/BloodHound/issues/672
    • Read the Contributing guide: https://github.com/SpecterOps/BloodHound/wiki/Contributing
  • [ ] I have ensured that related documentation is up-to-date
    • Open API docs
    • Code comments (GoDocs / JSDocs)
  • [ ] I have followed proper test practices
    • Added/updated tests to cover my changes
    • All new and existing tests passed

Summary by CodeRabbit

  • Bug Fixes

    • Improved keyboard navigation and focus across menus, tables, lists, dialogs and editors; many interactive elements now respond to Enter/Space.
    • Added descriptive ARIA labels to numerous buttons, icons, popovers and controls.
  • Style

    • Unified link styling and adjusted several visual/text-opacity tweaks for clearer emphasis.
  • New Features

    • Keyboard-accessible file drop area and improved keyboard activation for many list/menu items.
  • Chores

    • Updated accessibility linting and bumped a core UI dependency.
  • Tests

    • Tests updated to reflect new accessible names and interactions.

✏️ Tip: You can customize this high-level summary in your review settings.

dcairnsspecterops avatar Oct 27 '25 23:10 dcairnsspecterops