Suggestion: Adding LiveView Classes to Improve Accessibility

[MonaAghili]

https://hexdocs.pm/phoenix_live_view/bindings.html#loading-states-and-errors

Description:

The Phoenix LiveView phx- bindings allow you to dynamically modify styles, add styles, or show/hide elements or components based on user interactions. When a phx- event (e.g., phx-click) is triggered, LiveView temporarily applies unique classes like phx-click-loading to the targeted elements. This enables developers to easily control UI states without writing additional JavaScript.

For example, using [&.phx-click-loading], you can:

1. Modify Styles Dynamically: Change backgrounds, opacity, or other CSS properties to indicate the element is in a "loading" state.

   <button 
     phx-click="start_process" 
     class="btn-primary [&.phx-click-loading]:bg-gray-400"
   >
     Submit
   </button>

   Here, the button changes its background to bg-gray-400 during the loading state.

2. Show or Hide Components: Use this feature to toggle visibility of elements, such as loading spinners or tooltips.

   <div class="relative">
     <button phx-click="load_more" class="btn-primary">Load More</button>
     <div class="spinner [&.phx-click-loading]:block hidden"></div>
   </div>

   The spinner becomes visible (block) only when the phx-click-loading class is applied.

3. Add Styles Dynamically: Use utility-based styles to disable buttons, change text color, or alter the cursor.

   <button 
     phx-click="save_data" 
     class="btn-primary [&.phx-click-loading]:cursor-wait [&.phx-click-loading]:opacity-50"
   >
     Save
   </button>

NOTE: This feature simplifies dynamic UI updates by leveraging classes applied during specific event states. It eliminates the need for JavaScript.