I want some sort of visual indication of the active sort direction (A->Z or Z->A or 0->100 or 100->0)

This would be a lot more readable if we removed "http(s)://" and "http(s)://www" from URLs and formatted phone numbers. I prefer ###-###-####, but I'm open to other formats.

Ref: https://vuematerial.io/components/select

This is probably a function of where the logo is pulled from

If the style is null, the vertical spacing goes all out of whack:

The tap target seems a little small on mobile for my fat thumbs

As you can see, the color is not shown.

However, in the beer object, the color is known:

https://dev.hsv.beer/api/v1/beers/2211/

{
    "id": 2211,
    "manufacturer": {
        "id": 47,
        "name": "Sierra Nevada Brewing Company",
        "url": "",
        "location": "Chico, CA",
        "logo_url": "https://lh3.googleusercontent.com/54I5dJ_1gfS7phJsWVQj0yrje4ZqW9xdw6riZr4bQH933kgslLeQZ8cli5nu5zCP4m5wTEoVQVhHu2oCjpeENXVHvvX5=s150",
        "facebook_url": "",
        "twitter_handle": "",
        "instagram_handle": "",
        "untappd_url": "https://untappd.com/brewery/1142",
        "automatic_updates_blocked": true,
        "taphunter_url": "https://www.taphunter.com/brewery/sierra-nevada-brewing-company/1102",
        "taplist_io_pk": null,
        "time_first_seen": "2019-05-29T15:02:19+0000"
    },
    "abv": null,
    "color_srm": null,
    "color_srm_html": "#c17a37",
    "style": null,
    "venues": [
        {
            "id": 15,
            "time_zone": "America/Chicago",
            "tap_list_provider_display": "The Stem & Stein's HTML",
            "latitude": "34.69143300",
            "longitude": "-86.78591400",
            "name": "The Stem and Stein",
            "address": "10871 County Line Rd, Ste. B",
            "city": "Madison",
            "state": "AL",
            "postal_code": "35758",
            "country": "US",
            "website": "https://thestemandstein.com/",
            "facebook_page": "https://www.facebook.com/The-Stem-Stein-244857472236858/",
            "twitter_handle": "TheStemAndStein",
            "instagram_handle": "",
            "tap_list_provider": "stemandstein",
            "untappd_url": "https://untappd.com/v/the-stem-and-stein/35784",
            "email": "[email protected]",
            "phone_number": "2563253779",
            "logo_url": "https://thestemandstein.com/Content/logoSS.png",
            "slug": "stem-and-stein",
            "on_downtown_craft_beer_trail": false
        }
    ],
    "prices": [
        {
            "venue": "The Stem and Stein",
            "serving_size": {
                "name": "Pint",
                "volume_oz": "16.0"
            },
            "price": "5.00"
        }
    ],
    "untappd_metadata": null,
    "name": "Sierra Nevada Oktoberfest",
    "in_production": true,
    "ibu": null,
    "untappd_url": null,
    "beer_advocate_url": null,
    "rate_beer_url": null,
    "logo_url": "https://lh3.googleusercontent.com/54I5dJ_1gfS7phJsWVQj0yrje4ZqW9xdw6riZr4bQH933kgslLeQZ8cli5nu5zCP4m5wTEoVQVhHu2oCjpeENXVHvvX5=s150",
    "manufacturer_url": null,
    "automatic_updates_blocked": false,
    "taphunter_url": null,
    "stem_and_stein_pk": 367,
    "taplist_io_pk": null,
    "time_first_seen": "2019-08-25T12:24:10+0000"
}

Title says it all

From the same guy as #52 and #53:

I don't know how much javascript you want to throw at stuff, but on the hamburger menu when it opens it should apply focus to the menu and the escape key should close it and return focus to the hamburger menu button

• Ensure text remains visible during webfont load
  • Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
• Serve static assets with an efficient cache policy
• Image elements do not have [alt] attributes
• [id] attributes on the page are not unique
• Background and foreground colors do not have a sufficient contrast ratio.
  • h2.beer-name
• Defer offscreen images.

From /:

From /straight-to-ale:

More accessibility improvements

Basically, first element of body is a screen reader only (sr-only in bootstrap unless it's changed) hyperlink that when clicked goes to the start of the page content and doesn't read the navigation/logo sections

Though it's more optional on your site because it's just one page, it's mostly meant for skipping content that's just repeated on every page of a site

Ref: https://vuematerial.io/components/progress-spinner

On mobile, tapping the sort button a second time won't make it go away. Likewise, clicking doesn't hide on desktop.

Example:

From a friend who does VA web dev and has to deal with screen readers on a daily basis:

If you're bored, I'd consider throwing an aria-hidden=true on the logos, suppose a title works, but since the company name is already in the block it seems like it would be redundant on screen readers

Should selecting a new sort target dismiss the sort menu? I think it should, but I'm open to arguments in either direction.

From the same guy as #52:

Also on the "if you're bored" train, darker font color on the ratings if you want to be a little better on the contrast rating there

https://webaim.org/resources/contrastchecker/?fcolor=8F6400&bcolor=FFEDB7 is where it currently sits, as I understand it, the AA rating means it's good enough, but if it's really important to the site then AAA is where you'd want it to be

Basically the beer expanded view in a full-page form; it would make tweets in hsv-dot-beer/hsvdotbeer#270 more usable.

More from the same guy as #52:

Similar to the hamburger menu, the sort button probably needs an aria-label="Sort List of Beers" and some sort of event listeners to activate via enter/spacebar. I'd also consider capturing spacebar on the navigation menu, but that all just kind of depends on implementation details