Use newer version of noredink-ui

elm.json

@@ -92,7 +92,7 @@
         "elm-community/string-extra": "4.0.1 <= v < 5.0.0",
         "pablohirafuji/elm-markdown": "2.0.5 <= v < 3.0.0",
         "rtfeldman/elm-css": "17.0.1 <= v < 18.0.0",
-        "tesk9/accessible-html-with-css": "2.3.1 <= v < 3.0.0",
+        "tesk9/accessible-html-with-css": "3.0.0 <= v < 4.0.0",
         "tesk9/palette": "3.0.1 <= v < 4.0.0"
     },
     "test-dependencies": {

src/ClickableAttributes.elm

@@ -28,8 +28,8 @@ module ClickableAttributes exposing
 
 -}
 
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import EventExtras
 import Html.Styled exposing (Attribute)
 import Html.Styled.Attributes as Attributes
@@ -137,7 +137,7 @@ toLinkAttributes { routeToString, isDisabled } clickableAttributes =
     ( linkTypeName
     , if isDisabled then
         [ Role.link
-        , Widget.disabled True
+        , Aria.disabled True
         ]
 
       else

src/Nri/Ui/Accordion/V3.elm

@@ -62,7 +62,6 @@ module Nri.Ui.Accordion.V3 exposing
 import Accessibility.Styled exposing (Html, button, div, section)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Key as Key
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global
 import Html.Styled.Attributes as Attributes
@@ -338,9 +337,9 @@ viewEntry focus arrows ({ headerId, headerLevel, caret, headerContent, entryClas
                     , ( accordionEntryHeaderExpandedClass, isExpanded )
                     , ( accordionEntryHeaderCollapsedClass, not isExpanded )
                     ]
-                , Widget.disabled (config.toggle == Nothing)
-                , Widget.expanded isExpanded
-                , Aria.controls panelId
+                , Aria.disabled (config.toggle == Nothing)
+                , Aria.expanded isExpanded
+                , Aria.controls [ panelId ]
                 , config.toggle
                     |> Maybe.map (\toggle -> onClick (toggle (not isExpanded)))
                     |> Maybe.withDefault AttributesExtra.none

src/Nri/Ui/BreadCrumbs/V1.elm

@@ -35,7 +35,6 @@ Narrow Viewport (with Circled IconStyle):
 import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Style as Style
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global
 import Css.Media as Media
@@ -132,7 +131,7 @@ view config (BreadCrumbs breadCrumbs) =
         , displayFlex
         , Media.withMedia [ MediaQuery.mobile ] [ marginBottom (px 10) ]
         ]
-        [ Widget.label config.label ]
+        [ Aria.label config.label ]
         (viewBreadCrumbs config (List.reverse breadCrumbs))
 
 

src/Nri/Ui/Button/V10.elm

@@ -84,8 +84,8 @@ adding a span around the text could potentially lead to regressions.
 -}
 
 import Accessibility.Styled as Html exposing (Html)
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Style)
 import Css.Global
@@ -650,7 +650,7 @@ delete config =
         [ Events.onClick config.onClick
         , Attributes.type_ "button"
         , -- reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Labeling_buttons
-          Widget.label config.label
+          Aria.label config.label
         ]
         [ Svg.svg [ Svg.Attributes.viewBox "0 0 25 25" ]
             [ Svg.title [] [ Styled.toUnstyled (Styled.text "Delete") ]
@@ -706,7 +706,7 @@ toggleButton config =
              else
                 config.onSelect
             )
-        , Widget.pressed <| Just config.pressed
+        , Aria.pressed <| Just config.pressed
 
         -- reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Labeling_buttons
         , Role.button

src/Nri/Ui/Checkbox/V5.elm

@@ -31,8 +31,8 @@ module Nri.Ui.Checkbox.V5 exposing
 -}
 
 import Accessibility.Styled as Html
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Style
-import Accessibility.Styled.Widget as Widget
 import CheckboxIcons
 import Css exposing (..)
 import Css.Global
@@ -192,7 +192,7 @@ viewCheckbox model =
         (selectedToMaybe model.selected)
         [ Attributes.id model.identifier
         , if model.disabled then
-            Widget.disabled True
+            Aria.disabled True
 
           else
             Events.onCheck (\_ -> onCheck model)

src/Nri/Ui/ClickableSvg/V2.elm

@@ -63,7 +63,7 @@ In practice, we don't use these sizes. Remove them!
 
 -}
 
-import Accessibility.Styled.Widget as Widget
+import Accessibility.Styled.Aria as Aria
 import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Color, Style)
 import Css.Media
@@ -482,7 +482,7 @@ renderButton ((ButtonOrLink config) as button_) =
          , Attributes.type_ "button"
          , Attributes.css (buttonOrLinkStyles config theme ++ config.customStyles)
          , Attributes.disabled config.disabled
-         , Widget.label config.label
+         , Aria.label config.label
          ]
             ++ ClickableAttributes.toButtonAttributes config.clickableAttributes
             ++ config.customAttributes
@@ -511,8 +511,8 @@ renderLink ((ButtonOrLink config) as link_) =
     Html.a
         ([ Attributes.class ("Nri-Ui-Clickable-Svg-" ++ linkFunctionName)
          , Attributes.css (buttonOrLinkStyles config theme ++ config.customStyles)
-         , Widget.disabled config.disabled
-         , Widget.label config.label
+         , Aria.disabled config.disabled
+         , Aria.label config.label
          ]
             ++ (if not config.disabled then
                     extraAttrs

src/Nri/Ui/Menu/V1.elm

@@ -27,7 +27,6 @@ module Nri.Ui.Menu.V1 exposing
 
 import Accessibility.Styled.Aria as Aria exposing (controls)
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global exposing (descendants)
 import Html.Styled as Html exposing (..)
@@ -169,10 +168,10 @@ view config =
                     ]
                 , onClick <| config.onToggle (not config.isOpen)
                 , Attributes.disabled config.isDisabled
-                , Widget.disabled config.isDisabled
-                , Widget.hasMenuPopUp
-                , Widget.expanded config.isOpen
-                , controls menuId
+                , Aria.disabled config.isDisabled
+                , Aria.hasMenuPopUp
+                , Aria.expanded config.isOpen
+                , controls [ menuId ]
                 , Attributes.id buttonId
                 , config.buttonWidth
                     -- TODO: don't set this value as an inline style unnecessarily
@@ -276,7 +275,7 @@ viewDropdown config =
         , Role.menu
         , Aria.labelledBy config.buttonId
         , Attributes.id config.menuId
-        , Widget.hidden (not config.isOpen)
+        , Aria.hidden (not config.isOpen)
         , config.menuWidth
             -- TODO: don't set this style inline unnecessarily
             |> Maybe.map (\w -> Attributes.style "width" (String.fromInt w ++ "px"))
@@ -345,9 +344,9 @@ iconButton config =
                                 ]
                                 :: buttonLinkResets
                             )
-                         , Widget.disabled config.isDisabled
+                         , Aria.disabled config.isDisabled
                          , Attributes.disabled config.isDisabled
-                         , Widget.label config.label
+                         , Aria.label config.label
                          ]
                             ++ perhapsOnclick
                         )
@@ -470,9 +469,9 @@ iconLink config =
                                         []
                                    )
                             )
-                         , Widget.disabled config.isDisabled
+                         , Aria.disabled config.isDisabled
                          , Attributes.id (String.Extra.dasherize config.label)
-                         , Widget.label config.label
+                         , Aria.label config.label
                          ]
                             ++ perhapsHref
                         )

src/Nri/Ui/Menu/V2.elm

@@ -36,7 +36,6 @@ A togglable menu view and related buttons.
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Key as Key
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global exposing (descendants)
 import Html.Styled as Html exposing (..)
@@ -305,9 +304,9 @@ viewCustom config content =
             Html.text ""
         , div styleInnerContainer
             [ content
-                [ Widget.disabled config.isDisabled
-                , Widget.hasMenuPopUp
-                , Widget.expanded config.isOpen
+                [ Aria.disabled config.isDisabled
+                , Aria.hasMenuPopUp
+                , Aria.expanded config.isOpen
                 , -- Whether the menu is open or closed, move to the
                   -- first menu item if the "down" arrow is pressed
                   case ( maybeFirstFocusableElementId, maybeLastFocusableElementId ) of
@@ -329,7 +328,7 @@ viewCustom config content =
 
                     _ ->
                         AttributesExtra.none
-                , Aria.controls config.menuId
+                , Aria.controls [ config.menuId ]
                 , Attributes.id config.buttonId
                 , if config.isDisabled then
                     AttributesExtra.none
@@ -353,7 +352,7 @@ viewCustom config content =
                 , Role.menu
                 , Aria.labelledBy config.buttonId
                 , Attributes.id config.menuId
-                , Widget.hidden (not config.isOpen)
+                , Aria.hidden (not config.isOpen)
                 , css
                     [ Maybe.map (\w -> Css.width (Css.px (toFloat w))) config.menuWidth
                         |> Maybe.withDefault (Css.batch [])

src/Nri/Ui/Menu/V3.elm

@@ -49,7 +49,6 @@ A togglable menu view and related buttons.
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Key as Key
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global exposing (descendants)
 import EventExtras exposing (onKeyDownPreventDefault)
@@ -446,9 +445,9 @@ viewCustom config =
         , div styleInnerContainer
             [ let
                 buttonAttributes =
-                    [ Widget.disabled config.isDisabled
-                    , Widget.hasMenuPopUp
-                    , Widget.expanded config.isOpen
+                    [ Aria.disabled config.isDisabled
+                    , Aria.hasMenuPopUp
+                    , Aria.expanded config.isOpen
                     , -- Whether the menu is open or closed, move to the
                       -- first menu item if the "down" arrow is pressed
                       case ( maybeFirstFocusableElementId, maybeLastFocusableElementId ) of
@@ -470,7 +469,7 @@ viewCustom config =
 
                         _ ->
                             AttributesExtra.none
-                    , Aria.controls config.menuId
+                    , Aria.controls [ config.menuId ]
                     , Attributes.id config.buttonId
                     , if config.isDisabled then
                         AttributesExtra.none
@@ -501,7 +500,7 @@ viewCustom config =
                 , Role.menu
                 , Aria.labelledBy config.buttonId
                 , Attributes.id config.menuId
-                , Widget.hidden (not config.isOpen)
+                , Aria.hidden (not config.isOpen)
                 , css
                     [ Maybe.map (\w -> Css.width (Css.px (toFloat w))) config.menuWidth
                         |> Maybe.withDefault (Css.batch [])

src/Nri/Ui/Modal/V11.elm

@@ -162,7 +162,6 @@ import Accessibility.Styled as Html exposing (..)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Key as Key
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Browser.Dom as Dom
 import Browser.Events
 import Css exposing (..)
@@ -565,7 +564,7 @@ viewModal :
 viewModal config =
     section
         ([ Role.dialog
-         , Widget.modal True
+         , Aria.modal True
          , Aria.labeledBy modalTitleId
          ]
             ++ config.customAttributes
@@ -723,7 +722,7 @@ closeButtonId =
 viewCloseButton : msg -> Html msg
 viewCloseButton closeModal =
     button
-        (Widget.label "Close modal"
+        (Aria.label "Close modal"
             :: onClick closeModal
             :: Attrs.css
                 [ -- in the upper-right corner of the modal

src/Nri/Ui/RadioButton/V2.elm

@@ -10,7 +10,7 @@ module Nri.Ui.RadioButton.V2 exposing (view, premium)
 -}
 
 import Accessibility.Styled exposing (..)
-import Accessibility.Styled.Widget as Widget
+import Accessibility.Styled.Aria as Aria
 import Css exposing (..)
 import Css.Global
 import Html.Styled as Html
@@ -156,7 +156,7 @@ internalView config =
             (config.valueToString config.value)
             isChecked
             [ id id_
-            , Widget.disabled (config.isLocked || config.isDisabled)
+            , Aria.disabled (config.isLocked || config.isDisabled)
             , if not config.isDisabled then
                 onClick (config.onSelect config.value)
 

src/Nri/Ui/RadioButton/V3.elm

@@ -41,7 +41,6 @@ module Nri.Ui.RadioButton.V3 exposing
 
 import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Aria as Aria
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global
 import Html.Styled as Html
@@ -329,7 +328,7 @@ view { label, name, value, valueToString, selectedValue } attributes =
             stringValue
             isChecked
             ([ Attributes.id idValue
-             , Widget.disabled (isLocked || config.isDisabled)
+             , Aria.disabled (isLocked || config.isDisabled)
              , InputErrorAndGuidanceInternal.describedBy idValue config
              , case ( config.onSelect, config.isDisabled ) of
                 ( Just onSelect_, False ) ->

src/Nri/Ui/RadioButton/V4.elm

@@ -40,7 +40,6 @@ module Nri.Ui.RadioButton.V4 exposing
 
 import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Aria as Aria
-import Accessibility.Styled.Widget as Widget
 import Css exposing (..)
 import Css.Global
 import Html.Styled as Html
@@ -321,7 +320,7 @@ view { label, name, value, valueToString, selectedValue } attributes =
                 stringValue
                 isChecked
                 ([ Attributes.id idValue
-                 , Widget.disabled config.isDisabled
+                 , Aria.disabled config.isDisabled
                  , InputErrorAndGuidanceInternal.describedBy idValue config
                  , case config.onSelect of
                     Just onSelect_ ->

src/Nri/Ui/SideNav/V3.elm

@@ -46,8 +46,8 @@ module Nri.Ui.SideNav.V3 exposing
 -}
 
 import Accessibility.Styled exposing (..)
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Style as Style
-import Accessibility.Styled.Widget as Widget
 import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (..)
 import Css.Media
@@ -178,7 +178,7 @@ view config navAttributes entries =
     in
     styled nav
         appliedNavAttributes.css
-        ([ Maybe.map Widget.label appliedNavAttributes.navLabel
+        ([ Maybe.map Aria.label appliedNavAttributes.navLabel
          ]
             |> List.filterMap identity
         )

src/Nri/Ui/SlideModal/V2.elm

@@ -13,10 +13,9 @@ module Nri.Ui.SlideModal.V2 exposing
 -}
 
 import Accessibility.Styled as Html exposing (..)
-import Accessibility.Styled.Aria exposing (labelledBy)
+import Accessibility.Styled.Aria as Aria exposing (labelledBy)
 import Accessibility.Styled.Role as Role
 import Accessibility.Styled.Style
-import Accessibility.Styled.Widget as Widget
 import Css
 import Css.Animations
 import Css.Global
@@ -137,7 +136,7 @@ viewModal config (State { previousPanel }) summary =
             , Slide.withSlidingContents
             ]
         , Role.dialog
-        , Widget.modal True
+        , Aria.modal True
         , labelledBy (panelId summary.current)
         ]
         (case previousPanel of

src/Nri/Ui/Svg/V1.elm

@@ -14,8 +14,8 @@ module Nri.Ui.Svg.V1 exposing
 
 -}
 
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css exposing (Color)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
@@ -87,7 +87,7 @@ withHeight height (Svg record) =
 -}
 withCss : List Css.Style -> Svg -> Svg
 withCss css (Svg record) =
-    Svg { record | css = css }
+    Svg { record | css = record.css ++ css }
 
 
 {-| -}
@@ -122,8 +122,8 @@ toHtml (Svg record) =
 
                   else
                     Just (Attributes.css (Css.display Css.inlineBlock :: css))
-                , Maybe.map Widget.label record.label
-                    |> Maybe.withDefault (Widget.hidden True)
+                , Maybe.map Aria.label record.label
+                    |> Maybe.withDefault (Aria.hidden True)
                     |> Just
                 , Just Role.img
                 ]

src/Nri/Ui/Switch/V1.elm

@@ -8,7 +8,6 @@ module Nri.Ui.Switch.V1 exposing (view, Attribute, onSwitch, disabled, id, label
 
 import Accessibility.Styled as Html exposing (Html)
 import Accessibility.Styled.Aria as Aria
-import Accessibility.Styled.Widget as Widget
 import Css
 import Css.Global as Global
 import Css.Media
@@ -139,8 +138,8 @@ view attrs isOn =
                     Css.notAllowed
                 )
             ]
-        , Aria.controls config.id
-        , Widget.checked (Just isOn)
+        , Aria.controls [ config.id ]
+        , Aria.checked (Just isOn)
         ]
         [ viewCheckbox
             { id = config.id
@@ -195,7 +194,7 @@ viewCheckbox config =
                 Events.onCheck onCheck
 
             Nothing ->
-                Widget.disabled True
+                Aria.disabled True
          ]
             ++ List.map (Attributes.map never) config.attributes
         )

src/Nri/Ui/Switch/V2.elm

@@ -33,7 +33,7 @@ module Nri.Ui.Switch.V2 exposing
 -}
 
 import Accessibility.Styled as Html exposing (Html)
-import Accessibility.Styled.Widget as Widget
+import Accessibility.Styled.Aria as Aria
 import Css exposing (Color, Style)
 import Css.Global as Global
 import Css.Media
@@ -226,7 +226,7 @@ viewCheckbox config =
                 Events.onCheck onCheck
 
             _ ->
-                Widget.disabled True
+                Aria.disabled True
         ]
 
 

src/Nri/Ui/Tooltip/V1.elm

@@ -58,7 +58,6 @@ Example usage:
 import Accessibility.Styled as Html exposing (Attribute, Html)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css exposing (Color, Style)
 import Css.Global as Global
 import EventExtras
@@ -258,7 +257,7 @@ toggleTip { isOpen, onTrigger, extraButtonAttrs, label } tooltip_ =
         )
         []
         [ Html.button
-            ([ Widget.label label
+            ([ Aria.label label
              , css buttonStyleOverrides
              ]
                 ++ eventsForTrigger OnHover onTrigger

src/Nri/Ui/Tooltip/V3.elm

@@ -59,7 +59,6 @@ import Accessibility.Styled as Html exposing (Attribute, Html, text)
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Key as Key
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css exposing (Color, Px, Style)
 import Css.Global as Global
 import Css.Media
@@ -722,8 +721,8 @@ viewTooltip_ { trigger, id } tooltip =
                         [ Aria.describedBy [ id ] ]
 
                     Disclosure _ ->
-                        [ Widget.expanded tooltip.isOpen
-                        , Aria.controls id
+                        [ Aria.expanded tooltip.isOpen
+                        , Aria.controls [ id ]
                         ]
                  )
                     ++ buttonEvents
@@ -812,7 +811,7 @@ viewTooltip tooltipId config =
         , -- If the tooltip is the "primary label" for the content, then we can trust that the content
           -- in the tooltip is redundant. For example, if we have a ClickableSvg "Print" button, the button will
           -- *already have* an accessible name. It is not helpful to have the "Print" read out twice.
-          Widget.hidden (config.purpose == PrimaryLabel)
+          Aria.hidden (config.purpose == PrimaryLabel)
         ]
         [ Html.div
             ([ Attributes.css

src/TabsInternal.elm

@@ -8,7 +8,6 @@ module TabsInternal exposing (Config, Tab, views)
 
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css
 import EventExtras
 import Html.Styled as Html exposing (Attribute, Html)
@@ -100,7 +99,7 @@ viewTab_ config tab =
         (tagSpecificAttributes
             ++ tab.tabAttributes
             ++ [ Attributes.tabindex tabIndex
-               , Widget.selected isSelected
+               , Aria.selected isSelected
                , Role.tab
                , Attributes.id (tabToId tab.idString)
                , Events.onFocus (config.onSelect tab.id)
@@ -176,13 +175,13 @@ viewTabPanel tab selected =
          , Attributes.id (tabToBodyId tab.idString)
          ]
             ++ (if selected then
-                    [ Widget.hidden False
+                    [ Aria.hidden False
                     , Attributes.tabindex 0
                     ]
 
                 else
                     [ Attributes.css [ Css.display Css.none ]
-                    , Widget.hidden True
+                    , Aria.hidden True
                     , Attributes.tabindex -1
                     ]
                )

src/TabsInternal/V2.elm

@@ -12,7 +12,6 @@ module TabsInternal.V2 exposing
 
 import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Css
 import EventExtras
 import Html.Styled as Html exposing (Attribute, Html)
@@ -135,7 +134,7 @@ viewTab_ config index tab =
                          -- be able to focus on the current tab with the
                          -- keyboard.
                          Attributes.disabled (not isSelected && tab.disabled)
-                       , Widget.selected isSelected
+                       , Aria.selected isSelected
                        , Role.tab
                        , Attributes.id (tabToId tab.idString)
                        , Events.on "keyup" <|
@@ -249,13 +248,13 @@ viewTabPanel tab selected =
          , Attributes.id (tabToBodyId tab.idString)
          ]
             ++ (if selected then
-                    [ Widget.hidden False
+                    [ Aria.hidden False
                     , Attributes.tabindex 0
                     ]
 
                 else
                     [ Attributes.css [ Css.display Css.none ]
-                    , Widget.hidden True
+                    , Aria.hidden True
                     , Attributes.tabindex -1
                     ]
                )

styleguide-app/Example.elm

@@ -1,6 +1,6 @@
 module Example exposing (Example, fullName, preview, view, wrapMsg, wrapState)
 
-import Accessibility.Styled.Widget as Widget
+import Accessibility.Styled.Aria as Aria
 import Category exposing (Category)
 import Css exposing (..)
 import EllieLink
@@ -131,7 +131,7 @@ preview_ { navigate, exampleHref } example =
                             [ Css.displayFlex
                             , Css.flexDirection Css.column
                             ]
-                        , Widget.hidden True
+                        , Aria.hidden True
                         ]
                         (List.map (Html.map never) example.preview)
                    ]
@@ -149,7 +149,7 @@ view_ : EllieLink.Config -> Example state msg -> List (Html msg)
 view_ ellieLinkConfig example =
     let
         navMenu items =
-            Html.nav [ Widget.label (fullName example) ]
+            Html.nav [ Aria.label (fullName example) ]
                 [ Html.ul
                     [ Attributes.css
                         [ margin zero

styleguide-app/Examples/SegmentedControl.elm

@@ -11,8 +11,8 @@ module Examples.SegmentedControl exposing
 -}
 
 import Accessibility.Styled as Html exposing (Html)
+import Accessibility.Styled.Aria as Aria
 import Accessibility.Styled.Role as Role
-import Accessibility.Styled.Widget as Widget
 import Browser.Dom as Dom
 import Category exposing (Category(..))
 import Css
@@ -141,7 +141,7 @@ viewPreview : Html msg
 viewPreview =
     Html.div
         [ Role.img
-        , Widget.hidden True
+        , Aria.hidden True
         , css
             [ Css.displayFlex
             , Css.justifyContent Css.stretch

styleguide/elm.json

@@ -25,7 +25,7 @@
             "pablohirafuji/elm-markdown": "2.0.5",
             "rtfeldman/elm-css": "17.0.5",
             "rtfeldman/elm-sorter-experiment": "2.1.1",
-            "tesk9/accessible-html-with-css": "2.3.1",
+            "tesk9/accessible-html-with-css": "3.0.0",
             "tesk9/palette": "3.0.1",
             "wernerdegroot/listzipper": "4.0.0"
         },