Skip to content

Commit

Permalink
Fix few accessibility related issues. pgadmin-org#6991
Browse files Browse the repository at this point in the history
  • Loading branch information
adityatoshniwal authored Dec 6, 2023
1 parent e207a82 commit 51b02ae
Show file tree
Hide file tree
Showing 7 changed files with 30 additions and 7 deletions.
10 changes: 9 additions & 1 deletion web/pgadmin/static/js/components/CodeMirror.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,10 @@ export function FindDialog({editor, show, replace, onClose, selFindVal}) {
inputRef={(ele)=>{findInputRef.current = ele;}}
onChange={(value)=>setFindVal(value)}
onKeyPress={onFindEnter}
placeholder={gettext('Find text')}
controlProps={{
title: gettext('Find text')
}}
endAdornment={
<InputAdornment position="end">
<PgIconButton data-test="case" title="Match case" icon={<FormatCaseIcon />} size="xs" noBorder
Expand All @@ -273,6 +277,10 @@ export function FindDialog({editor, show, replace, onClose, selFindVal}) {
className={classes.marginTop}
onChange={(value)=>setReplaceVal(value)}
onKeyPress={onReplaceEnter}
placeholder={gettext('Replace value')}
controlProps={{
title: gettext('Replace value')
}}
/>}

<Box display="flex" className={classes.marginTop}>
Expand Down Expand Up @@ -554,7 +562,7 @@ export default function CodeMirror({currEditor, name, value, options, events, re
>
<FindDialog editor={editor.current} show={showFind} replace={isReplace} onClose={closeFind} selFindVal={editor.current?.getSelection() && editor.current.getSelection().length > 0 ? editor.current.getSelection() : ''}/>
<CopyButton editor={editor.current} show={showCopy} copyText={value}></CopyButton>
<textarea ref={taRef} name={name}
<textarea ref={taRef} name={name} title={gettext('SQL editor')}
id={cid} aria-describedby={helpid} value={value??''} onChange={()=>{/* dummy */}}
/>
</div>
Expand Down
5 changes: 5 additions & 0 deletions web/pgadmin/static/js/components/ContextMenu.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { PgMenu, PgMenuDivider, PgMenuItem, PgSubMenu } from './Menu';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';

export default function ContextMenu({menuItems, position, onClose, label='context'}) {
const getPgMenuItem = (menuItem, i)=>{
Expand Down Expand Up @@ -42,6 +43,10 @@ export default function ContextMenu({menuItems, position, onClose, label='contex
}
return getPgMenuItem(menuItem, i);
})}
{menuItems.length == 0 && getPgMenuItem({
label: gettext('No options'),
isDisabled: true,
}, 0)}
</PgMenu>
);
}
Expand Down
7 changes: 4 additions & 3 deletions web/pgadmin/static/js/components/FormComponents.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,8 @@ export const InputText = forwardRef(({
...(type ? { pattern: !_.isUndefined(controlProps) && !_.isUndefined(controlProps.pattern) ? controlProps.pattern : patterns[type] } : {}),
style: inputStyle || {},
autoComplete: 'new-password',
'data-testid': 'input-text'
'data-testid': 'input-text',
title: controlProps?.title,
}}
readOnly={Boolean(readonly)}
disabled={Boolean(disabled)}
Expand Down Expand Up @@ -565,7 +566,7 @@ export function InputCheckbox({ cid, helpid, value, onChange, controlProps, read
checked={Boolean(value)}
onChange={readonly ? () => {/*This is intentional (SonarQube)*/ } : onChange}
color="primary"
inputProps={{ 'aria-describedby': helpid }}
inputProps={{ 'aria-describedby': helpid, 'title': controlProps.label}}
{...props} />
}
label={controlProps.label}
Expand Down Expand Up @@ -1265,7 +1266,7 @@ export function NotifierMessage({
<Box className={clsx(classes.container, classes[`container${type}`])} style={style} data-test="notifier-message">
{showIcon && <FormIcon type={type} className={classes[`icon${type}`]} />}
<Box className={textCenter ? classes.messageCenter : classes.message}>{HTMLReactParse(message || '')}</Box>
{closable && <IconButton className={clsx(classes.closeButton, classes[`icon${type}`])} onClick={onClose}>
{closable && <IconButton title={gettext('Close Message')} className={clsx(classes.closeButton, classes[`icon${type}`])} onClick={onClose}>
<FormIcon close={true} />
</IconButton>}
</Box>
Expand Down
9 changes: 7 additions & 2 deletions web/pgadmin/static/js/components/PgTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ const useStyles = makeStyles((theme) => ({
}));

const IndeterminateCheckbox = React.forwardRef(
({ indeterminate, ...rest }, ref) => {
({ indeterminate, label, ...rest }, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;

Expand All @@ -197,6 +197,7 @@ const IndeterminateCheckbox = React.forwardRef(
<Checkbox
color="primary"
ref={resolvedRef} {...rest}
inputProps={{'aria-label': label}}
/>
</>
);
Expand All @@ -210,6 +211,7 @@ IndeterminateCheckbox.propTypes = {
rest: PropTypes.func,
getToggleAllRowsSelectedProps: PropTypes.func,
row: PropTypes.object,
label: PropTypes.string,
};

const ROW_HEIGHT = 34;
Expand Down Expand Up @@ -405,6 +407,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
}
onChange={modifiedOnChange}
checked={checked}
label={gettext('Select All Rows')}
/>
</div>
);},
Expand All @@ -414,6 +417,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
<div className={classes.selectCell}>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()}
disabled={!_.isUndefined(row.original.canDrop) ? !(row.original.canDrop) : false}
label={gettext('Select Row')}
/>
</div>
),
Expand Down Expand Up @@ -465,7 +469,8 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
{props.CustomHeader && (<Box className={classes.customHeader}> <props.CustomHeader /></Box>)}
<Box marginLeft="auto">
<InputText
placeholder={'Search'}
placeholder={gettext('Search')}
controlProps={{title: gettext('Search')}}
className={classes.searchInput}
value={searchVal}
onChange={(val) => {
Expand Down
1 change: 1 addition & 0 deletions web/pgadmin/templates/base.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!DOCTYPE html>
<html lang="{{ request.cookies.get('PGADMIN_LANGUAGE') or 'en' }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
<Grid item lg={4} md={4} sm={4} xs={4} className={classes.inputLabel}>
<InputSelect
options={serverList}
optionsReloadBasis={serverList?.length}
onChange={changeServer}
value={selectedServer}
controlProps={
Expand All @@ -97,6 +98,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
<Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel}>
<InputSelect
options={databaseList}
optionsReloadBasis={databaseList?.length}
onChange={changeDatabase}
value={selectedDatabase}
controlProps={
Expand All @@ -112,6 +114,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
<Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel}>
<InputSelect
options={schemaList}
optionsReloadBasis={schemaList?.length}
onChange={changeSchema}
value={selectedSchema}
controlProps={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
height: '100%',
width: '100%',
resize: 'none'
}}/>
}} title={gettext('Scratch Pad')}/>
}),
]
}
Expand Down

0 comments on commit 51b02ae

Please sign in to comment.