@rarui/components 1.24.2-rc.6 → 1.25.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-09-23 `1.26.0`
+
+#### 🎉 New features
+
+- Implemented comprehensive accessibility improvements across ALL web components following WCAG guidelines and modern web standards with complete ARIA properties, focus management, and screen reader compatibility. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced all interactive components (Button, Input, Checkbox, RadioButton, Toggle, IconButton, Chip, Dropdown, Select, Link, SideNavigation Item, Breadcrumb Item, Accordion Header, Modal, Sidebar, Tabs) with `delegatesFocus: true` for seamless keyboard navigation and focus management. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Added standardized ARIA properties (`aria-label`, `aria-labelledby`, `aria-describedby`) with `reflect: true` to ALL components (60+ components) ensuring proper screen reader support and accessibility compliance. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Eliminated ARIA attribute duplication between host elements and shadow DOM following Lit accessibility best practices for optimal screen reader compatibility. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Created comprehensive accessibility implementation guide (`accessibility-guide-lit.md`) with detailed patterns, examples, validation checklists, and testing guidelines for all web component types. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced RadioButton component with native HTML group behavior ensuring only one radio button per `name` can be selected using event-driven communication pattern. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Updated CLAUDE.md development documentation with comprehensive accessibility implementation standards and quick reference patterns for maintaining consistent accessibility across future components. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- Fixed missing `ifDefined` imports across multiple components that were accidentally removed during cleanup process, ensuring proper template directive functionality. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+- Improved component type compatibility by standardizing ARIA property types to `string | null` matching LitElement base class requirements. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-09-18 `1.25.0`
 
 #### 🎉 New features

package/dist/index.d.ts

@@ -18317,6 +18317,9 @@ type AvatarProperties = WebComponentProperties<AvatarManifestProperties>;
 
 declare class RaruiAvatar extends LitElement {
     size?: AvatarProperties["size"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private handleSlotChange;
@@ -18343,6 +18346,9 @@ declare class RaruiBagde extends LitElement {
     variant?: BadgeProperties["variant"];
     size?: BadgeProperties["size"];
     appearance?: BadgeProperties["appearance"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18405,6 +18411,9 @@ declare class RaruiIcon extends LitElement {
     sprinkleAttrs: Record<string, string>;
     name: IconProperties["name"];
     size: Sizes | string;
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     private getSvgWithSize;
     render(): TemplateResult<1> | null;
@@ -18481,6 +18490,9 @@ type StepperProperties = WebComponentProperties<StepperManifestProperties>;
 
 declare class RaruiStepper extends LitElement {
     direction: StepperProperties["direction"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     private assignedSteps;
     private steps;
     static styles: CSSResult;
@@ -18516,6 +18528,9 @@ declare class RaruiText extends LitElement {
     "color"?: TextProperties["color"];
     "font-weight"?: TextProperties["font-weight"];
     "text-align"?: TextProperties["text-align"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult;
 }
@@ -18546,6 +18561,9 @@ declare class RaruiTitle extends LitElement {
     as: TitleProperties["as"];
     "font-weight"?: TitleProperties["font-weight"];
     "text-align"?: TitleProperties["text-align"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult;
 }
@@ -18597,6 +18615,12 @@ type TooltipManifestProperties = Omit<TooltipProps, "visible" | "onVisibility" |
 type TooltipProperties = WebComponentProperties<TooltipManifestProperties>;
 
 declare class RaruiTooltip extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     arrow: TooltipProperties["arrow"];
     padding: TooltipProperties["padding"];
     offset: TooltipProperties["offset"];
@@ -18608,6 +18632,9 @@ declare class RaruiTooltip extends LitElement {
     position: TooltipProperties["position"];
     strategy: TooltipProperties["strategy"];
     open: boolean;
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     reference: HTMLElement;
     floating: HTMLElement;
     arrowEl: HTMLElement;
@@ -18669,6 +18696,9 @@ type ProgressProperties = WebComponentProperties<ProgressManifestProperties>;
 declare class RaruiProgress extends LitElement {
     percentage?: ProgressProperties["percentage"];
     color?: ProgressProperties["color"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18695,6 +18725,9 @@ declare class RaruiStatus extends LitElement {
     variant?: StatusProperties["variant"];
     full?: StatusProperties["full"];
     dot: StatusProperties["dot"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18734,6 +18767,12 @@ type ButtonManifestProperties = ButtonProps & {
 type ButtonProperties = WebComponentProperties<ButtonManifestProperties>;
 
 declare class RaruiButton extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     type: ButtonProperties["type"];
     size: ButtonProperties["size"];
     variant: ButtonProperties["variant"];
@@ -18743,6 +18782,13 @@ declare class RaruiButton extends LitElement {
     name: ButtonProperties["name"];
     value: ButtonProperties["value"];
     form: ButtonProperties["form"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    ariaPressed: "true" | "false" | "mixed" | null;
+    ariaExpanded: "true" | "false" | null;
+    ariaHasPopup: "menu" | "dialog" | "listbox" | "tree" | "grid" | "true" | "false" | null;
+    ariaControls: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private _handleClick;
@@ -18826,6 +18872,15 @@ declare class RaruiCheckbox extends LitElement {
     name?: CheckboxProperties["name"];
     value?: CheckboxProperties["value"];
     form?: CheckboxProperties["form"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     private _hasCheckedAttribute;
     private _internals;
     private input;
@@ -18885,6 +18940,12 @@ type ChipManifestProperties = ChipProps & {
 type ChipProperties = WebComponentProperties<ChipManifestProperties>;
 
 declare class RaruiChip extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     sprinkleAttrs: Record<string, string>;
     padding: ChipProperties["padding"];
     size?: ChipProperties["size"];
@@ -18898,6 +18959,10 @@ declare class RaruiChip extends LitElement {
     name?: ChipProperties["name"];
     value?: ChipProperties["value"];
     form?: ChipProperties["form"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    ariaPressed: "true" | "false" | "mixed" | null;
     static styles: CSSResult;
     private handleClick;
     private handleCloseClick;
@@ -18954,6 +19019,12 @@ type DropdownManifestProperties = DropdownProps & {
 type DropdownProperties = WebComponentProperties<DropdownManifestProperties, "onVisibility" | "portalId">;
 
 declare class RaruiDropdown extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     sprinkleAttrs: Record<string, string>;
     offset: DropdownProperties["offset"];
     padding: DropdownProperties["padding"];
@@ -18968,6 +19039,9 @@ declare class RaruiDropdown extends LitElement {
     get visible(): boolean | undefined;
     private _visible?;
     private _hasVisibleAttribute;
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     reference: HTMLElement;
     floating: HTMLElement;
     static styles: CSSResult;
@@ -19025,11 +19099,20 @@ type DropdownItemManifestProperties = DropdownItemProps & {
 type DropdownItemProperties = WebComponentProperties<DropdownItemManifestProperties>;
 
 declare class RaruiDropdownItem extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     name: DropdownItemProperties["name"];
     selected: DropdownItemProperties["selected"];
     disabled: DropdownItemProperties["disabled"];
     value: DropdownItemProperties["value"];
     type: DropdownItemProperties["type"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     static styles: CSSResult;
     private handleClick;
@@ -19071,6 +19154,12 @@ type IconButtonManifestProperties = IconButtonProps & {
 type IconButtonProperties = WebComponentProperties<IconButtonManifestProperties>;
 
 declare class RaruiIconButton extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     size: IconButtonProperties["size"];
     variant: IconButtonProperties["variant"];
     appearance: IconButtonProperties["appearance"];
@@ -19080,6 +19169,11 @@ declare class RaruiIconButton extends LitElement {
     name: IconButtonProperties["name"];
     value: IconButtonProperties["value"];
     form: IconButtonProperties["form"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    ariaPressed: "true" | "false" | "mixed" | null;
+    ariaExpanded: "true" | "false" | null;
     static styles: CSSResult;
     private handleClick;
     render(): TemplateResult<1>;
@@ -19154,6 +19248,12 @@ type InputManifestProperties = InputProps & {
 type InputProperties = WebComponentProperties<InputManifestProperties>;
 
 declare class RaruiInput extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     size: InputProperties["size"];
     appearance?: InputProperties["appearance"];
     border: InputProperties["border"];
@@ -19171,6 +19271,10 @@ declare class RaruiInput extends LitElement {
     minlength: InputProperties["minlength"];
     maxlength: InputProperties["maxlength"];
     pattern: InputProperties["pattern"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    ariaInvalid: "true" | "false" | null;
     private _internals;
     static formAssociated: boolean;
     constructor();
@@ -19242,6 +19346,9 @@ declare class RaruiRadioButton extends LitElement {
     form: RadioButtonProperties["form"];
     required: RadioButtonProperties["required"];
     readonly: RadioButtonProperties["readonly"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     private _internals;
     static formAssociated: boolean;
     constructor();
@@ -19315,6 +19422,12 @@ type TextareaManifestProperties = TextareaProps & {
 type TextareaProperties = WebComponentProperties<TextareaManifestProperties>;
 
 declare class RaruiTextarea extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     disabled: boolean;
     private _value;
     get value(): string;
@@ -19331,6 +19444,10 @@ declare class RaruiTextarea extends LitElement {
     placeholder: TextareaProperties["placeholder"];
     minlength: TextareaProperties["minlength"];
     maxlength: TextareaProperties["maxlength"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    ariaInvalid: "true" | "false" | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
     connectedCallback(): void;
@@ -19383,6 +19500,12 @@ type ToggleManifestProperties = ToggleProps & {
 type ToggleProperties = WebComponentProperties<ToggleManifestProperties>;
 
 declare class RaruiToggle extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     name: ToggleProperties["name"];
     label: ToggleProperties["label"];
     size?: ToggleProperties["size"];
@@ -19392,6 +19515,10 @@ declare class RaruiToggle extends LitElement {
     value: ToggleProperties["value"];
     form: ToggleProperties["form"];
     required: ToggleProperties["required"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    ariaInvalid: "true" | "false" | null;
     private _internals;
     static formAssociated: boolean;
     constructor();
@@ -19419,12 +19546,21 @@ type SidebarManifestProperties = SidebarProps;
 type SidebarProperties = WebComponentProperties<SidebarManifestProperties, "onRemove">;
 
 declare class RaruiSidebar extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     sprinkleAttrs: Record<string, string>;
     open: SidebarProperties["open"];
     position: SidebarProperties["position"];
     maxWidth: SidebarProperties["max-width"];
     padding: SidebarProperties["padding"];
     portalId: SidebarProperties["portal-id"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     sidebarElement: HTMLElement;
     overlayElement: HTMLElement;
     static styles: CSSResult;
@@ -19461,6 +19597,9 @@ type BreadcrumbManifestProperties = BreadcrumbProps;
 type BreadcrumbProperties = WebComponentProperties<BreadcrumbManifestProperties>;
 
 declare class RaruiBreadcrumb extends LitElement {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     itemsAfterTruncate: BreadcrumbProperties["items-after-truncate"];
     private items;
     private visibleItems;
@@ -19509,6 +19648,15 @@ type BreadcrumbItemManifestProperties = BreadcrumbItemProps & {
 type BreadcrumbItemProperties = WebComponentProperties<BreadcrumbItemManifestProperties>;
 
 declare class RaruiBreadcrumbItem extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     name?: BreadcrumbItemProperties["name"];
     href?: BreadcrumbItemProperties["href"];
     active?: BreadcrumbItemProperties["active"];
@@ -19588,6 +19736,12 @@ type LinkManifestProperties = LinkProps & {
 type LinkProperties = WebComponentProperties<LinkManifestProperties>;
 
 declare class RaruiLink extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     type: LinkProperties["type"];
     as: LinkProperties["as"];
     appearance?: LinkProperties["appearance"];
@@ -19599,6 +19753,9 @@ declare class RaruiLink extends LitElement {
     name?: LinkProperties["name"];
     value?: LinkProperties["value"];
     form?: LinkProperties["form"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     private _onClick;
     render(): TemplateResult<1>;
@@ -19706,6 +19863,15 @@ type SideNavigationItemManifestProperties = SideNavigationItemProps & {
 type SideNavigationItemProperties = WebComponentProperties<SideNavigationItemManifestProperties>;
 
 declare class RaruiSideNavigationItem extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     active: SideNavigationItemProperties["active"];
     level: SideNavigationItemProperties["level"];
     as: SideNavigationItemProperties["as"];
@@ -19805,12 +19971,21 @@ type AccordionHeaderManifestProperties = AccordionHeaderProps;
 type AccordionHeaderProperties = WebComponentProperties<AccordionHeaderManifestProperties>;
 
 declare class RaruiAccordionHeader extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     title: NonNullable<AccordionHeaderProperties["title"]>;
     subtitle: AccordionHeaderProperties["subtitle"];
     size: AccordionHeaderProperties["size"];
     noIconToggle: AccordionHeaderProperties["no-icon-toggle"];
     disabled: boolean;
     selected: boolean;
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     private handleClick;
     private getTitleSize;
@@ -19867,6 +20042,9 @@ declare class RaruiBanner extends LitElement {
     appearance?: BannerProperties["appearance"];
     floating: BannerProperties["floating"];
     closable: BannerProperties["closable"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     private handleClose;
     render(): TemplateResult<1>;
@@ -19913,6 +20091,9 @@ declare class RaruiCard extends LitElement {
     sprinkleAttrs: Record<string, string>;
     padding?: CardProperties["padding"];
     "background-color": CardProperties["background-color"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -19933,11 +20114,20 @@ type ModalManifestProperties = ModalProps;
 type ModalProperties = WebComponentProperties<ModalManifestProperties, "onDismiss">;
 
 declare class RaruiModal extends LitElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     sprinkleAttrs: Record<string, string>;
     padding: ModalProperties["padding"];
     portalId: ModalProperties["portal-id"];
     open: ModalProperties["open"];
     maxWidth: ModalProperties["max-width"];
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
     dialog: HTMLElement;
     static styles: CSSResult;
     cleanupAutoUpdate?: () => void;