diff --git a/client/app/components/CreateSourceDialog.jsx b/client/app/components/CreateSourceDialog.jsx index 8ce19bd0..9ae27836 100644 --- a/client/app/components/CreateSourceDialog.jsx +++ b/client/app/components/CreateSourceDialog.jsx @@ -82,6 +82,7 @@ class CreateSourceDialog extends React.Component {
this.setState({ searchText: e.target.value })} autoFocus data-test="SearchSource" diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx index 81fdea24..241d3b69 100644 --- a/client/app/components/EditInPlace.jsx +++ b/client/app/components/EditInPlace.jsx @@ -86,6 +86,7 @@ export default class EditInPlace extends React.Component { return ( this.stopEditing(e.target.value)} onKeyDown={this.handleKeyDown} autoFocus diff --git a/client/app/components/ParameterMappingInput.jsx b/client/app/components/ParameterMappingInput.jsx index ed8f8384..b691d5e0 100644 --- a/client/app/components/ParameterMappingInput.jsx +++ b/client/app/components/ParameterMappingInput.jsx @@ -201,7 +201,13 @@ export class ParameterMappingInput extends React.Component { const { mapping: { mapTo }, } = this.props; - return this.updateParamMapping({ mapTo: e.target.value })} />; + return ( + this.updateParamMapping({ mapTo: e.target.value })} + /> + ); } renderDashboardMapToExisting() { @@ -420,6 +426,7 @@ class TitleEditor extends React.Component { size="small" value={this.state.title} placeholder={paramTitle} + aria-label="Edit parameter title" onChange={this.onEditingTitleChange} onPressEnter={this.save} maxLength={100} diff --git a/client/app/components/ParameterValueInput.jsx b/client/app/components/ParameterValueInput.jsx index 7b67b6ff..f2ad8c7a 100644 --- a/client/app/components/ParameterValueInput.jsx +++ b/client/app/components/ParameterValueInput.jsx @@ -136,7 +136,12 @@ class ParameterValueInput extends React.Component { const normalize = val => (isNaN(val) ? undefined : val); return ( - this.onSelect(normalize(val))} /> + this.onSelect(normalize(val))} + /> ); } @@ -148,6 +153,7 @@ class ParameterValueInput extends React.Component { this.onSelect(e.target.value)} /> diff --git a/client/app/components/QuerySelector.jsx b/client/app/components/QuerySelector.jsx index adcb67ec..efb86b74 100644 --- a/client/app/components/QuerySelector.jsx +++ b/client/app/components/QuerySelector.jsx @@ -94,7 +94,9 @@ export default function QuerySelector(props) { } if (props.disabled) { - return ; + return ( + + ); } if (props.type === "select") { @@ -141,11 +143,12 @@ export default function QuerySelector(props) { return ( {selectedQuery ? ( - + ) : ( setSearchTerm(e.target.value)} suffix={spinIcon} /> diff --git a/client/app/components/SelectItemsDialog.jsx b/client/app/components/SelectItemsDialog.jsx index f572c4ca..99acadfb 100644 --- a/client/app/components/SelectItemsDialog.jsx +++ b/client/app/components/SelectItemsDialog.jsx @@ -120,7 +120,12 @@ function SelectItemsDialog({ }>
- search(event.target.value)} placeholder={inputPlaceholder} autoFocus /> + search(event.target.value)} + placeholder={inputPlaceholder} + aria-label={inputPlaceholder} + autoFocus + />
{renderStagedItem && (
diff --git a/client/app/components/cards-list/CardsList.tsx b/client/app/components/cards-list/CardsList.tsx index 9ca85a70..4779917f 100644 --- a/client/app/components/cards-list/CardsList.tsx +++ b/client/app/components/cards-list/CardsList.tsx @@ -47,6 +47,7 @@ export default function CardsList({ items = [], showSearch = false }: CardsListP
) => setSearchText(e.target.value)} autoFocus /> diff --git a/client/app/components/dashboards/CreateDashboardDialog.jsx b/client/app/components/dashboards/CreateDashboardDialog.jsx index cb6bb8ca..ed10b6b1 100644 --- a/client/app/components/dashboards/CreateDashboardDialog.jsx +++ b/client/app/components/dashboards/CreateDashboardDialog.jsx @@ -60,6 +60,7 @@ function CreateDashboardDialog({ dialog }) { onChange={handleNameChange} onPressEnter={save} placeholder="Dashboard Name" + aria-label="Dashboard name" disabled={saveInProgress} autoFocus /> diff --git a/client/app/components/dashboards/TextboxDialog.jsx b/client/app/components/dashboards/TextboxDialog.jsx index 1c17d0e2..4ca904ca 100644 --- a/client/app/components/dashboards/TextboxDialog.jsx +++ b/client/app/components/dashboards/TextboxDialog.jsx @@ -73,6 +73,7 @@ function TextboxDialog({ dialog, isNew, ...props }) { className="resize-vertical" rows="5" value={text} + aria-label="Textbox widget content" onChange={handleInputChange} autoFocus placeholder="This is where you write some text" diff --git a/client/app/components/dynamic-parameters/DateParameter.jsx b/client/app/components/dynamic-parameters/DateParameter.jsx index 089c8835..c88cf7fb 100644 --- a/client/app/components/dynamic-parameters/DateParameter.jsx +++ b/client/app/components/dynamic-parameters/DateParameter.jsx @@ -23,7 +23,13 @@ const DYNAMIC_DATE_OPTIONS = [ ]; function DateParameter(props) { - return ; + return ( + + ); } DateParameter.propTypes = { diff --git a/client/app/components/groups/CreateGroupDialog.jsx b/client/app/components/groups/CreateGroupDialog.jsx index ce93c59e..f6dd39f6 100644 --- a/client/app/components/groups/CreateGroupDialog.jsx +++ b/client/app/components/groups/CreateGroupDialog.jsx @@ -28,6 +28,7 @@ class CreateGroupDialog extends React.Component { onChange={event => this.setState({ name: event.target.value })} onPressEnter={() => this.save()} placeholder="Group Name" + aria-label="Group name" autoFocus /> diff --git a/client/app/components/items-list/components/Sidebar.jsx b/client/app/components/items-list/components/Sidebar.jsx index 244ea09c..83b99efe 100644 --- a/client/app/components/items-list/components/Sidebar.jsx +++ b/client/app/components/items-list/components/Sidebar.jsx @@ -10,7 +10,7 @@ import TagsList from "@/components/TagsList"; SearchInput */ -export function SearchInput({ placeholder, value, showIcon, onChange }) { +export function SearchInput({ placeholder, value, showIcon, onChange, label }) { const [currentValue, setCurrentValue] = useState(value); useEffect(() => { @@ -29,21 +29,29 @@ export function SearchInput({ placeholder, value, showIcon, onChange }) { const InputControl = showIcon ? Input.Search : Input; return (
- +
); } SearchInput.propTypes = { - placeholder: PropTypes.string, value: PropTypes.string.isRequired, + placeholder: PropTypes.string, showIcon: PropTypes.bool, onChange: PropTypes.func.isRequired, + label: PropTypes.string, }; SearchInput.defaultProps = { placeholder: "Search...", showIcon: false, + label: "Search", }; /* diff --git a/client/app/components/queries/ApiKeyDialog/index.jsx b/client/app/components/queries/ApiKeyDialog/index.jsx index c3c5c986..2bd6d4bd 100644 --- a/client/app/components/queries/ApiKeyDialog/index.jsx +++ b/client/app/components/queries/ApiKeyDialog/index.jsx @@ -45,7 +45,7 @@ function ApiKeyDialog({ dialog, ...props }) {
API Key
- + {policy.canEdit(query) && (