Fix few accessibility related issues. #6991

Author: adityatoshniwal

web/pgadmin/static/js/components/CodeMirror.jsx

@@ -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
@@ -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}>
@@ -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>

web/pgadmin/static/js/components/ContextMenu.jsx

@@ -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)=>{
@@ -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>
   );
 }

web/pgadmin/static/js/components/FormComponents.jsx

@@ -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)}
@@ -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}
@@ -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>

web/pgadmin/static/js/components/PgTable.jsx

@@ -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;
 
@@ -197,6 +197,7 @@ const IndeterminateCheckbox = React.forwardRef(
         <Checkbox
           color="primary"
           ref={resolvedRef} {...rest}
+          inputProps={{'aria-label': label}}
         />
       </>
     );
@@ -210,6 +211,7 @@ IndeterminateCheckbox.propTypes = {
   rest: PropTypes.func,
   getToggleAllRowsSelectedProps: PropTypes.func,
   row: PropTypes.object,
+  label: PropTypes.string,
 };
 
 const ROW_HEIGHT = 34;
@@ -405,6 +407,7 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
                     }
                     onChange={modifiedOnChange}
                     checked={checked}
+                    label={gettext('Select All Rows')}
                     />
                   </div>
                 );},
@@ -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>
               ),
@@ -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) => {

web/pgadmin/templates/base.html

@@ -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">

web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx

@@ -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={
@@ -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={
@@ -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={

web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx

@@ -192,7 +192,7 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
                     height: '100%',
                     width: '100%',
                     resize: 'none'
-                  }}/>
+                  }} title={gettext('Scratch Pad')}/>
                 }),
               ]
             }