diff --git a/src/components/cortex/CortexGitHistory.tsx b/src/components/cortex/CortexGitHistory.tsx index 962c17e..a4b44ff 100644 --- a/src/components/cortex/CortexGitHistory.tsx +++ b/src/components/cortex/CortexGitHistory.tsx @@ -250,6 +250,7 @@ export const CortexGitHistory: Component = (props) => { placeholder="Filter commits..." size="sm" leftIcon="search" + ariaLabel="Filter commits" type="search" /> diff --git a/src/components/cortex/primitives/CortexIcon.tsx b/src/components/cortex/primitives/CortexIcon.tsx index 213b33f..14a0ea7 100644 --- a/src/components/cortex/primitives/CortexIcon.tsx +++ b/src/components/cortex/primitives/CortexIcon.tsx @@ -19,7 +19,7 @@ export const CORTEX_ICON_SIZES = { export type CortexIconSize = keyof typeof CORTEX_ICON_SIZES | number; -export interface CortexIconProps { +export interface CortexIconProps extends JSX.SvgSVGAttributes { name: string; size?: CortexIconSize; color?: string; @@ -203,7 +203,7 @@ const ICON_NAME_MAP: Record = { }; export const CortexIcon: Component = (props) => { - const [local] = splitProps(props, [ + const [local, others] = splitProps(props, [ "name", "size", "color", @@ -233,6 +233,7 @@ export const CortexIcon: Component = (props) => { return ( = (props) => { const [local] = splitProps(props, [ "value", "placeholder", "onChange", "onSubmit", "onFocus", "onBlur", "disabled", "error", "size", "leftIcon", "rightIcon", "onRightIconClick", - "class", "style", "type", "autoFocus", "multiline", "rows", + "class", "style", "type", "autoFocus", "multiline", "rows", "ariaLabel", ]); const [isFocused, setIsFocused] = createSignal(false); @@ -130,6 +131,7 @@ export const CortexInput: Component = (props) => { name={local.leftIcon!} size={specs().iconSize} style={iconStyle(false)} + aria-hidden="true" /> @@ -141,6 +143,8 @@ export const CortexInput: Component = (props) => { autofocus={local.autoFocus} rows={local.rows || 3} style={inputStyle()} + aria-label={local.ariaLabel} + aria-label={local.ariaLabel} onInput={handleInput} onFocus={handleFocus} onBlur={handleBlur} @@ -154,6 +158,8 @@ export const CortexInput: Component = (props) => { disabled={local.disabled} autofocus={local.autoFocus} style={inputStyle()} + aria-label={local.ariaLabel} + aria-label={local.ariaLabel} onInput={handleInput} onFocus={handleFocus} onBlur={handleBlur} @@ -166,6 +172,7 @@ export const CortexInput: Component = (props) => { name={local.rightIcon!} size={specs().iconSize} style={iconStyle(!!local.onRightIconClick)} + aria-hidden="true" onClick={local.onRightIconClick} />