fix: make tools dashboard filter controls keyboard accessible

[Oluwatunmise-olat]

Description

• fixes accessibility and semantic markup issues in Tools Dashboard controls on /tools
• replaces non-semantic clickable div triggers with semantic <button type="button"> for:
  • Filter
  • Jump to Category
• replaces invalid nested interactive markup:
  • changes wrapper around <Filters /> from <button> to <div>
• improves toggle semantics by adding:
  • aria-expanded
  • aria-controls
• updates Clear Filters to use a keyboard-accessible button control

Why this change

The previous implementation relied on clickable div elements and included a button wrapping interactive children. This can cause inconsistent keyboard behavior and accessibility issues for assistive
technologies.

Testing done

• npm run lint (existing repo warnings only)
• npm run test -- --runInBand (all test suites passed locally)
• manual keyboard test on /tools:
  • Tab navigation reaches controls
  • Enter/Space toggles Filter and Jump to Category as expected

Scope

• changed file:
  • components/tools/ToolsDashboard.tsx
• no functional changes outside Tools Dashboard filter/category interaction semantics

Related issue(s)

Fixes #5223

Summary by CodeRabbit

• Bug Fixes
  • Improved Tools Dashboard accessibility by converting toggle controls and actions to proper button elements, enhancing keyboard navigation and screen reader support for Filter, Category Jump, and Clear Filters functionalities.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7819c2f
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69ac2e03a4c911000803ac7c
😎 Deploy Preview	https://deploy-preview-5224--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f0c59fcb-cbaf-4c07-8f62-ab058dea17d0

📥 Commits

Reviewing files that changed from the base of the PR and between 2813976 and 7819c2f.

📒 Files selected for processing (1)

• components/tools/ToolsDashboard.tsx

---

📝 Walkthrough

Walkthrough

The ToolsDashboard component's Filter and Jump to Category controls are converted from non-interactive divs to semantic button elements with ARIA attributes for improved keyboard accessibility. Filter popup wrapper is changed from a button to a properly structured div.

Changes

Cohort / File(s)	Summary
Accessibility Improvements components/tools/ToolsDashboard.tsx	Replaced div-based toggle controls with semantic <button type="button"> elements for Filter and Jump to Category. Added ARIA attributes (aria-expanded, aria-controls) and paired sub-panel divs with corresponding id attributes (tools-filter-panel, tools-category-panel). Converted Clear Filters action wrapper to a proper button element.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Buttons now where divs once stood,
A keyboard-friendly neighborhood!
With aria-expanded to announce the way,
Accessibility wins the day. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: make tools dashboard filter controls keyboard accessible' accurately and concisely summarizes the main change: making filter controls keyboard accessible by converting them to semantic button elements.
Linked Issues check	✅ Passed	All coding requirements from issue #5223 are met: clickable divs replaced with semantic buttons, filter wrapper changed to div, aria attributes added, and Clear Filters made keyboard accessible.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing accessibility issues in ToolsDashboard. No unrelated modifications to other components or files are present.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (2813976) to head (7819c2f).

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #5224   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          796       796           
  Branches       146       146           
=========================================
  Hits           796       796           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	37
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-5224--asyncapi-website.netlify.app/