Various fixes (#206)

* Restore id attr to box

* Move tests

* Toggle aria improvements

* action_list_item warn any id attribute missing

* Change label to button

* id_prefix for theme menu items

* Wrap checkbox_group and radio_group in fieldset

* Refactor fieldset wrap

* Update tests

* Add attr form to button rest

Solves #203

* Add attributes to slots

* Use div for checkbox/radio button wrapper

* Remove rounded borders from first stream row

* Update test

* Copy of Phoenix.Component.focus_wrap that ensures sorted attributes to aid testing

* Format

.gitignore

@@ -31,4 +31,5 @@ priv/octicon_builder/story_list.ex
 node_modules
 .DS_Store
 .elixir-tools
-.elixir_ls
+.elixir_ls
+/priv/test_results

CHANGELOG.md

@@ -55,7 +55,36 @@ See for update instructions: "Updating to 0.8" below.
 - Replaced backdrop attributes `is_dark_backdrop`, `is_medium_backdrop` and `is_light_backdrop` with `backdrop_strength` and values `"strong"`, `"medium"` and `"light"`.
 - Menus and dialogs can now be closed with Escape by default.
 
-#### Updating to 0.8
+### Other changes
+
+#### Box with streams
+
+The [box](`PrimerLive.Component.box/1`) component now supports streams:
+
+```
+<.box stream={@streams.clients} id="clients">
+  <:row :let={{_dom_id, data}}>
+    <%= data.name %>
+  </:row>
+</.box>
+```
+
+This includes a breaking change: `let` is now reserved for stream data, so the callback data no longer contains `classes`.
+
+#### Fieldset wrapper for checkbox_group and radio_group
+
+The form group created by [checkbox_group](`PrimerLive.Component.checkbox_group/1`) and [radio_group](`PrimerLive.Component.radio_group/1`) is now automatically wrapped in a fieldset. The `label` attribute generates a `legend` element.
+
+#### Updated Octicons
+
+This update to version `19.11.0` includes around 50 additions. See [primer-live.org/octicon](https://primer-live.org/octicon) for a visual list.
+
+#### Accessibility
+
+- Added ARIA tags `aria-haspopup` and `aria-owns`.
+- DOM ids are reformatted to a DOM-safe ID string.
+
+### Updating to 0.8
 
 - Replace `Promp.show` and `Prompt.hide`:
 
@@ -74,41 +103,28 @@ See for update instructions: "Updating to 0.8" below.
   - `is_medium_backdrop` becomes `backdrop_strength="medium"`
   - `is_light_backdrop` becomes `backdrop_strength="light"`
 - Attribute `is_escapable` can be removed because this is now the default. If the component should not be removed using Escape, use `is_escapable={false}`.
+
+#### Less used attributes
+
 - Form state: the previous method to preserve state, using "a fictitious and unique field name" can be removed.
   - Remove `form` and `field` from menu and dialog component attributes.
 - Because `focus_first` (without a selector) is now the default, nothing needs to be changed when using this attribute.
   - If in existing code a selector value is used, rename the attribute to `focus_after_opening_selector`.
 - Replace `prompt_options` and `phx_click_touch` with `status_callback_selector`. There's no simple way to replace `prompt_options`, because passing JavaScript functions is no longer supported. A solution could be very similar to the previous `phx_click_touch` method. See [Status callbacks](menus-and-dialogs.html#status-callbacks) for an example.
+- If you use `checkbox_group` or `radio_group` inside a `fieldset`, remove the fieldset as it is now redundant.
+- If you are using `box` with a `:let` callback:
 
-### Other changes
+  - Previous:
 
-#### Added support for streams to [Box](`PrimerLive.Component.box/1`)
+        <:row :let={classes}>
+          <.link href="/" class={classes.link}>Home</.link>
+        </:row>
 
-```
-<.box stream={@streams.clients} id="clients">
-  <:row :let={{_dom_id, data}}>
-    <%= data.name %>
-  </:row>
-</.box>
-```
-
-This includes a breaking change: `let` is now reserved for stream data, so the callback data no longer contains `classes`.
-
-- Previous:
-
-      <:row :let={classes}>
-        <.link href="/" class={classes.link}>Home</.link>
-      </:row>
-
-- Becomes:
-
-      <:row>
-        <.link href="/" class="Box-row-link">Home</.link>
-      </:row>
-
-#### Updated Octicons
+  - Becomes:
 
-This update to version `19.11.0` includes around 50 additions. See [primer-live.org/octicon](https://primer-live.org/octicon) for a visual list.
+        <:row>
+          <.link href="/" class="Box-row-link">Home</.link>
+        </:row>
 
 ## 0.7.2
 

assets/css/primercss-overrides.css

@@ -593,7 +593,8 @@ fieldset[disabled] .FormControl-textarea::placeholder {
 
 /* Ensure that successive Box-row siblings don't show rounded top corners. */
 .Box-header+.Box-row,
-.Box-row+.Box-row {
+.Box-row+.Box-row,
+.Box-header+[data-stream-container]>.Box-row:first-of-type {
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
 }
@@ -735,11 +736,17 @@ span[data-color-mode] {
 }
 
 /* -- label */
-.pl-FormControl--input-group .form-group-header .FormControl-label {
+.pl-FormControl--input-group .form-group-header .FormControl-label,
+legend.FormControl-label {
     font-weight: var(--base-text-weight-normal, 400);
     font-size: var(--h4-size, 16px);
 }
 
+/* -- copy form-group-header margin */
+legend.FormControl-label {
+    margin: 0 0 6px;
+}
+
 /* -- caption */
 .pl-FormControl--input-group .FormControl-caption {
     margin-top: -3px;