Move message "X of X tools displayed" somewhere else on the page

[jonespm]

This was mentioned on a comment on a PR. I'd mentioned that we have a message now on the top of the page that takes up around 10% horizontal space and could use some UX/UI feedback.

What I saw was that we might make it an Input Adornment on top or bottom of the search box but still have aria announce the change. These seem to fit really well and be right in context with the input.

This example shows when it changes but I didn't test if it was accessible.

Originally posted by @jonespm in #250 (comment)

[ssciolla]

I asked Janel for feedback.

[janelilr]

While I know this is a filter feature, I looked at several websites where they have the search field and display “# of results” text. The “# of results” text is located closer to the result items rather than near the search field. For CAE, leaving the text where it is would fit a familiar pattern to the user.

The current spacing doesn't look cramp so leaving it as is would be fine. If you are wanting to reduce how much space it takes up, try reducing the margin of the H2 and p.

[jonespm]

Thanks @janelilr, that makes sense now that I'm looking at it too.

• For Example on Google
  

• And on Github
  

Both of those are left aligned though, and in the Google both cases the styling is quite different so it stands out. I think it's fine, and we could maybe just adjust the placement or the margin.

Perhaps it's another question but do you think the H2 we have makes sense where it is? Perhaps it's just with both of those on separate lines, especially on Mobile is where it seems like there's a lot of space taken up. Maybe this is another issue.

<h2 class="MuiTypography-root MuiTypography-h6 css-1y8dxs3">Find the best tools for your class and students</h2>

[janelilr]

The H2 makes sense where it is. It gives an indication what the user can do.