diff --git a/elm.json b/elm.json index 7b314f63..156fc7b6 100644 --- a/elm.json +++ b/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": { diff --git a/src/ClickableAttributes.elm b/src/ClickableAttributes.elm index 429807c9..1c5006b9 100644 --- a/src/ClickableAttributes.elm +++ b/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 diff --git a/src/Nri/Ui/Accordion/V3.elm b/src/Nri/Ui/Accordion/V3.elm index 8fd5a113..57db45a8 100644 --- a/src/Nri/Ui/Accordion/V3.elm +++ b/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 diff --git a/src/Nri/Ui/BreadCrumbs/V1.elm b/src/Nri/Ui/BreadCrumbs/V1.elm index 1c6c3f0c..292142e3 100644 --- a/src/Nri/Ui/BreadCrumbs/V1.elm +++ b/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)) diff --git a/src/Nri/Ui/Button/V10.elm b/src/Nri/Ui/Button/V10.elm index 18115456..70852e66 100644 --- a/src/Nri/Ui/Button/V10.elm +++ b/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 diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 06bdecf5..9507d5e4 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/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) diff --git a/src/Nri/Ui/ClickableSvg/V2.elm b/src/Nri/Ui/ClickableSvg/V2.elm index 41caaf39..bec143df 100644 --- a/src/Nri/Ui/ClickableSvg/V2.elm +++ b/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 diff --git a/src/Nri/Ui/Menu/V1.elm b/src/Nri/Ui/Menu/V1.elm index d8fc0a95..d21de4ae 100644 --- a/src/Nri/Ui/Menu/V1.elm +++ b/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 ) diff --git a/src/Nri/Ui/Menu/V2.elm b/src/Nri/Ui/Menu/V2.elm index dea33d1e..e95b468c 100644 --- a/src/Nri/Ui/Menu/V2.elm +++ b/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 []) diff --git a/src/Nri/Ui/Menu/V3.elm b/src/Nri/Ui/Menu/V3.elm index 8a94cb23..2d0c20f9 100644 --- a/src/Nri/Ui/Menu/V3.elm +++ b/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 []) diff --git a/src/Nri/Ui/Modal/V11.elm b/src/Nri/Ui/Modal/V11.elm index 1baa35db..62cefa5f 100644 --- a/src/Nri/Ui/Modal/V11.elm +++ b/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 diff --git a/src/Nri/Ui/RadioButton/V2.elm b/src/Nri/Ui/RadioButton/V2.elm index 0ae0bda7..a1f1c5e2 100644 --- a/src/Nri/Ui/RadioButton/V2.elm +++ b/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) diff --git a/src/Nri/Ui/RadioButton/V3.elm b/src/Nri/Ui/RadioButton/V3.elm index 7a101df0..1de36316 100644 --- a/src/Nri/Ui/RadioButton/V3.elm +++ b/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 ) -> diff --git a/src/Nri/Ui/RadioButton/V4.elm b/src/Nri/Ui/RadioButton/V4.elm index 44cb9511..12b6d47a 100644 --- a/src/Nri/Ui/RadioButton/V4.elm +++ b/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_ -> diff --git a/src/Nri/Ui/SideNav/V3.elm b/src/Nri/Ui/SideNav/V3.elm index 55215350..d3faec3b 100644 --- a/src/Nri/Ui/SideNav/V3.elm +++ b/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 ) diff --git a/src/Nri/Ui/SlideModal/V2.elm b/src/Nri/Ui/SlideModal/V2.elm index ae18885e..0e259f8d 100644 --- a/src/Nri/Ui/SlideModal/V2.elm +++ b/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 diff --git a/src/Nri/Ui/Svg/V1.elm b/src/Nri/Ui/Svg/V1.elm index 5950a47c..c7f68e26 100644 --- a/src/Nri/Ui/Svg/V1.elm +++ b/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 ] diff --git a/src/Nri/Ui/Switch/V1.elm b/src/Nri/Ui/Switch/V1.elm index 08f2f14c..b4a5e7d8 100644 --- a/src/Nri/Ui/Switch/V1.elm +++ b/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 ) diff --git a/src/Nri/Ui/Switch/V2.elm b/src/Nri/Ui/Switch/V2.elm index 0dceb02e..e4b25182 100644 --- a/src/Nri/Ui/Switch/V2.elm +++ b/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 ] diff --git a/src/Nri/Ui/Tooltip/V1.elm b/src/Nri/Ui/Tooltip/V1.elm index 686b7cbb..c9c294e9 100644 --- a/src/Nri/Ui/Tooltip/V1.elm +++ b/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 diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm index 18d13a75..f919ebbc 100644 --- a/src/Nri/Ui/Tooltip/V3.elm +++ b/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 diff --git a/src/TabsInternal.elm b/src/TabsInternal.elm index 8ae16bcc..392f7186 100644 --- a/src/TabsInternal.elm +++ b/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 ] ) diff --git a/src/TabsInternal/V2.elm b/src/TabsInternal/V2.elm index a7a77d66..a8f88bda 100644 --- a/src/TabsInternal/V2.elm +++ b/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 ] ) diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index c948e058..d6ef4d7d 100644 --- a/styleguide-app/Example.elm +++ b/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 diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index b871dff9..6ba1de9a 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/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 diff --git a/styleguide/elm.json b/styleguide/elm.json index 0e192d3e..9565f2c7 100644 --- a/styleguide/elm.json +++ b/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" },