chore: add accessible name to the icon button (#3300)

nextui-org · Jun 23, 2024 · edd48a0 · edd48a0
1 parent 0691630
commit edd48a0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/great-avocados-eat.md b/.changeset/great-avocados-eat.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/chip": patch
+"@nextui-org/input": patch
+---
+
+Add accessible name to the icon button (#2802, #2808)
diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts
@@ -69,7 +69,7 @@ export default function App() {
       variant="bordered"
       placeholder="Enter your password"
       endContent={
-        <button className="focus:outline-none" type="button" onClick={toggleVisibility}>
+        <button className="focus:outline-none" type="button" onClick={toggleVisibility} aria-label="toggle password visibility">
           {isVisible ? (
             <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
           ) : (

diff --git a/packages/components/chip/src/use-chip.ts b/packages/components/chip/src/use-chip.ts
@@ -130,6 +130,7 @@ export function useChip(originalProps: UseChipProps) {
       role: "button",
       tabIndex: 0,
       className: slots.closeButton({class: classNames?.closeButton}),
+      "aria-label": "close chip",
       ...mergeProps(closePressProps, closeFocusProps),
     };
   };

diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -473,6 +473,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         ...props,
         role: "button",
         tabIndex: 0,
+        "aria-label": "clear input",
         "data-slot": "clear-button",
         "data-focus-visible": dataAttr(isClearButtonFocusVisible),
         className: slots.clearButton({class: clsx(classNames?.clearButton, props?.className)}),