[A11y] Correct role attribute for package lists

[advay26]

Addresses #9301

Problem:

On the Profiles page and the List Packages page, the lists of packages were flagged for not having the appropriate role on the individual list items. These were already marked with role="listitem" and the enclosing div was marked with role="list", so I'm unsure why this was flagged. However, we can bypass the need for these manual role attributes by using <ul> and <li> tags directly instead.

Previously,

Fix:

These package lists now use <ul> and <li> tags, which do not require additional role attributes. I also had to remove the bullet and left padding from these package list <ul>s.

After the changes,

[joelverhagen]

This view is shared by the main search page. Could you run FastPass on that page too? Looks good by the way. It sort of makes sense. It's a list of package results :)

[joelverhagen]

Check FastPass on other pages that use this shared view then

[ryuyu]

Same as what @joelverhagen said. Let's run a pass over the other places that share this view, and we are good to go. Looks great!

[advay26]

I found a separate issue with the "There are X packages" heading on the Search page, where it was inappropriately labeled as an 'alert'. Labeling it a 'heading' fixes this, and just fits better too. FastPass passes on both, the Search pages and the Profiles pages now.

Previously, (2 separate issues: (1) 'alert' heading, (2) the list items)

After the changes,

[joelverhagen]

Is role="heading" necessary for h1 tags?

[advay26]

You're right, it wasn't necessary, the screen reader announces h1 tags as headings anyway. I removed the header role from this element. I also added tabindex=0 to this element so that screen readers can read the heading, which they were skipping previously.