I have written many times my struggles on here that web UI is a huge gap and undermines Phoenix as a viable way to build apps fast. Phoenix isn’t fast vs other solutions which have established UI frameworks.

A set of semantic headless components that address accessibility is the missing piece in the ecosystem and now, with Doggo you have made great strides to closing that gap. Well done and thank-you for your efforts.

I’ve actually moved to using web components / custom elements because of this gap (Shoelace and Adobe Spectrum with the what looks to be amazing Spectrum 2 just around the corner).

IMO Doggo should be seriously considered by the Phoenix core team as a foundation library given there is nothing other than the “stop gap” core components which are not fit for purpose and create a maintenance issue for phoenix apps.

If Phoenix had a set of core semantic components which implement all the accessibility requirements correctly and cover the common application use cases then tools, generators, CSS frameworks, themes, application website templates, UI design/figma templates, and real storybook collaboration with design teams can thrive within the Phoenix ecosystem.

Without a core semantic UI component library Phoenix and liveview will remain a fringe hobby web technology with low adoption because the gap between UI design teams and dev teams is too large as they cant work effectively or efficiently together. Phoenix in effect slows you down vs just using react or next.js or any other popular solution that has established UI components and real storybook support out of the box to close the gap between design intent and devs.

Doggo 0.5.0 focuses on the semantics of the remaining APG patterns. Note that not all added components are fully functional yet: client-side interactivity including keyboard support will be the next focus. Components that are not ready to be used yet are marked with admonition blocks in the documentation.

Added

• New component: Doggo.alert_dialog/1.
• New component: Doggo.carousel/1.
• New component: Doggo.combobox/1.
• New component: Doggo.disclosure_button/1.
• New component: Doggo.menu/1.
• New component: Doggo.menu_bar/1.
• New component: Doggo.menu_button/1.
• New component: Doggo.menu_group/1.
• New component: Doggo.menu_item/1.
• New component: Doggo.menu_item_checkbox/1.
• New component: Doggo.menu_item_radio_group/1.
• New component: Doggo.radio_group/1.
• New component: Doggo.split_pane/1.
• New component: Doggo.tabs/1.
• New component: Doggo.toolbar/1.
• New component: Doggo.tree/1.
• Storybook page about modifier classes.
• Mix task mix dog.modifiers to list all modifier classes.

Changed

• Set aria-invalid and aria-errormessage attributes in Doggo.input/1
  component.
• Use buttons instead of links in Doggo.action_bar/1.
• Add toolbar role to Doggo.action_bar/1.
• Use section instead of article in Doggo.modal/1.
• Use button for close button in Doggo.modal/1.
• Add dismissable attribute to Doggo.modal/1.
• Remove role from button_link/1, add class.
• Rename Doggo.drawer/1 slots to header, main, and footer.
• Rename Doggo.drawer_nav/1, Doggo.drawer_nav_nested/1 and
  Doggo.drawer_nav_section to Doggo.vertical_nav/1,
  Doggo.vertical_nav_nested/1 and Doggo.vertical_nav_section/1.
• Depend on phoenix_storybook ~> 0.6.0.

I just released Doggo 0.9.0. Since I didn’t announce the releases in between, just a brief summary:

• Various components have seen improvements, including documentation, stories, and customizability, and bumps in maturity levels.
• Example CSS has been added for some components and will be added for the remaining components in the future. Links to the CSS files have been added to the component docs on Hex.
• The demo application has been deployed and is available at https://woylie-doggo.fly.dev/.
• mix dog.classes and Doggo.classes/1 have been added to retrieve all classes used in the configured components. Unlike the previous mix dog.modifiers and Doggo.modifier_classes/1, the output includes the base classes, the nested classes based on the base class, customizable additional classes, and configured modifier classes.