Refine tree view a11y

[fatadel]

The issue fixes #5674.

The original issue mentions inaccessibility of the .treeViewAppendageColumn element (the filename). However, during development I've also noticed inaccessibility of the label frames. As discussed in the matrix channel, for now I just increased their opacity level. Shall we create an issue for further improvement of the dimming functionality? @canova

Appendage Column

Before

After

Label Frames

Before

After

Deploy preview: Before / After

Closes #5674.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.75%. Comparing base (c3eaddf) to head (a4fd515).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5779   +/-   ##
=======================================
  Coverage   85.75%   85.75%           
=======================================
  Files         318      318           
  Lines       31240    31240           
  Branches     8600     8504   -96     
=======================================
  Hits        26790    26790           
  Misses       4020     4020           
  Partials      430      430           

☔ 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.

[canova]

Thanks for the PR! I added a comment about the opacity of the label frames when they are not selected. Let me know what you think!

I've added a before and after profile to the PR's first message. Additional to the images, we usually put these before and after profile links so the person who's reviewing the PR can test it also. It would be great if you can do that in the next PRs. You can find the deploy preview link of this PR in the checks below that's marked as netlify/perf-html/deploy-preview. But also the url itself is very predictable. It's always https://deploy-preview-<PR-number>--perf-html.netlify.app/.

Ah also, now that we have dark mode (still in the main branch only, not deployed yet). Could you also test to see if this works well with the dark mode? You can enable it by going to the home page (https://deploy-preview-5779--perf-html.netlify.app/) and pressing the dark mode checkbox.

[canova]

Non selected version of this dimmed color was actually passing the WCAG AAA standards. So it's probably okay to leave it as 0.7 when it's not selected. But it fails the a11y check when it's selected. Can we change the opacity of this only when it's selected (similar to the other one)?

[fatadel]

Thanks for your valuable feedback, @canova!

I've refined the changes for dimming, so that now the opacity level is increased only when selected.

I've tested the changes with the Dark Mode - looks good and accessible (see below).

Appendage Column

Label Frames

[canova]

Thanks for the updates, looks good to me!

Now that you are in the firefox-devtools org, you should be able to merge this PR yourself. You can see our process on how to merge PRs here: https://github.com/firefox-devtools/profiler/blob/main/CONTRIBUTING.md#merging-pull-requests

We either use "create a merge commit" or "squash and merge" depending on the PR. Squash is useful when the PR only has a single commit, and merge commit is useful when we have different commits in the PR that are split up into logical chunks. When we use the merge commit, we try to be more careful on the commit messages and make sure that they are split well. To do that, we do interactive rebasing, squashing and amending commits a lot to have a good commit history. For example, an optional improvement in this PR would be to merge 2nd and 3rd commits. But if you choose to squash, then you don't have to think about that.