icons-descriptions-are-not-displayed-when-using-TAB

Feature #14206

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index b037fcf41b6df2a28183c8b1d3c802765ba26715..341aa5ac062e6dab06694fd98b4207d32c2fd6a1 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -53,11 +53,11 @@ export const CollectionPanelFiles =
                 <CardHeader
                     className={classes.cardSubheader}
                     action={
-                        <IconButton onClick={onOptionsMenuOpen}>
-                            <Tooltip title="More options">
+                        <Tooltip title="More options">
+                            <IconButton onClick={onOptionsMenuOpen}>
                                 <CustomizeTableIcon />
-                            </Tooltip>
-                        </IconButton>
+                            </IconButton>
+                        </Tooltip>
                     } />
                 <Grid container justify="space-between">
                     <Typography variant="caption" className={classes.nameHeader}>

diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index 210dc5aedda07bcf59f15cb7607c7f2b73662294..ccff61811b6303dacf9a8362e4c3853391d768b2 100644 (file)
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -29,34 +29,34 @@ export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>
 
 export const ColumnSelector = withStyles(styles)(
     ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
-    <Popover triggerComponent={ColumnSelectorTrigger}>
-        <Paper>
-            <List dense>
-                {columns
-                    .filter(column => column.configurable)
-                    .map((column, index) =>
-                        <ListItem
-                            button
-                            key={index}
-                            onClick={() => onColumnToggle(column)}>
-                            <Checkbox
-                                disableRipple
-                                color="primary"
-                                checked={column.selected}
-                                className={classes.checkbox} />
-                            <ListItemText>
-                                {column.name}
-                            </ListItemText>
-                        </ListItem>
-                    )}
-            </List>
-        </Paper>
-    </Popover>
+        <Popover triggerComponent={ColumnSelectorTrigger}>
+            <Paper>
+                <List dense>
+                    {columns
+                        .filter(column => column.configurable)
+                        .map((column, index) =>
+                            <ListItem
+                                button
+                                key={index}
+                                onClick={() => onColumnToggle(column)}>
+                                <Checkbox
+                                    disableRipple
+                                    color="primary"
+                                    checked={column.selected}
+                                    className={classes.checkbox} />
+                                <ListItemText>
+                                    {column.name}
+                                </ListItemText>
+                            </ListItem>
+                        )}
+                </List>
+            </Paper>
+        </Popover>
 );
 
 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
-    <IconButton {...props}>
-        <Tooltip title="Filters">
-            <MenuIcon />
-        </Tooltip>
-    </IconButton>;
+    <Tooltip title="Filters">
+        <IconButton {...props}>
+            <MenuIcon aria-label="Filters" />
+        </IconButton>
+    </Tooltip>;

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 58507fb07415c81b06189b93aa4ca714f1947122..d63d1ccce519b69b825594ec6a05d4f7f5339397 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -114,11 +114,11 @@ export const DataExplorer = withStyles(styles)(
 
         renderContextMenuTrigger = (item: T) =>
             <Grid container justify="flex-end">
-                <IconButton onClick={event => this.props.onContextMenu(event, item)}>
-                    <Tooltip title="More options">
+                <Tooltip title="More options">
+                    <IconButton onClick={event => this.props.onContextMenu(event, item)}>
                         <MoreVertIcon />
-                    </Tooltip>
-                </IconButton>
+                    </IconButton>
+                </Tooltip>
             </Grid>
 
         contextMenuColumn: DataColumn<any> = {

diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index a00df75dd4e67709f2a40549f90199740781e396..cd68d5ba27a22298dd13a79b7c71e828eac77580 100644 (file)
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -33,15 +33,15 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
         const { anchorEl } = this.state;
         return (
             <div>
-                <IconButton
-                    aria-owns={anchorEl ? id : undefined}
-                    aria-haspopup="true"
-                    color="inherit"
-                    onClick={this.handleOpen}>
-                    <Tooltip title={title}>
+                <Tooltip title={title}>
+                    <IconButton
+                        aria-owns={anchorEl ? id : undefined}
+                        aria-haspopup="true"
+                        color="inherit"
+                        onClick={this.handleOpen}>
                         {icon}
-                    </Tooltip>
-                </IconButton>
+                    </IconButton>
+                </Tooltip>
                 <Menu
                     id={id}
                     anchorEl={anchorEl}

diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index 9b248e0c8b5f488bae4dca288501df8d724bc2e0..02dd04b4c84e3a4011fe8a9ac4ef5599a540300c 100644 (file)
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -47,13 +47,13 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
                 <Typography
                     className={classes.sizeInfo}
                     variant="caption">{formatFileSize(item.data.size)}</Typography>
-                <IconButton
-                    className={classes.button}
-                    onClick={this.handleClick}>
-                    <Tooltip title="More options">
+                <Tooltip title="More options">
+                    <IconButton
+                        className={classes.button}
+                        onClick={this.handleClick}>
                         <MoreOptionsIcon />
-                    </Tooltip>
-                </IconButton>
+                    </IconButton>
+                </Tooltip>
             </div >;
         }
 

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index ab25e1379ddee64f55a016bfeff8680754d1d3be..f01b5692f204ca3a72683f71cdecdbaf194a4108 100644 (file)
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -67,11 +67,11 @@ export const SearchBar = withStyles(styles)(
                         placeholder="Search"
                         value={this.state.value}
                     />
-                    <IconButton className={classes.button}>
-                        <Tooltip title='Search'>
+                    <Tooltip title='Search'>
+                        <IconButton className={classes.button}>
                             <SearchIcon />
-                        </Tooltip>
-                    </IconButton>
+                        </IconButton>
+                    </Tooltip>
                 </form>
             </Paper>;
         }

diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index da2f3a9b6ab07dccd3691a5e0396ca60ee7f16f8..f2ec2d6439024c066eebb2a0b8a18a0ec4fba901 100644 (file)
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -68,12 +68,12 @@ export const SearchInput = withStyles(styles)(
                         onChange={this.handleChange}
                         endAdornment={
                             <InputAdornment position="end">
-                                <IconButton
-                                    onClick={this.handleSubmit}>
-                                    <Tooltip title='Search'>
+                                <Tooltip title='Search'>
+                                    <IconButton
+                                        onClick={this.handleSubmit}>
                                         <SearchIcon />
-                                    </Tooltip>
-                                </IconButton>
+                                    </IconButton>
+                                </Tooltip>
                             </InputAdornment>
                         } />
                 </FormControl>

diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
index ae86fe52fea10d9c42e42488baa7074a75e6412f..071b986ab57352050ef411e5cd6db7ecc3bd61ea 100644 (file)
--- a/src/views-components/main-content-bar/main-content-bar.tsx
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -22,11 +22,11 @@ export const MainContentBar = connect(undefined, {
                 <Breadcrumbs />
             </Grid>
             <Grid item>
-                <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
-                    <Tooltip title="Additional Info">
+                <Tooltip title="Additional Info">
+                    <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
                         <DetailsIcon />
-                    </Tooltip>
-                </IconButton>
+                    </IconButton>
+                </Tooltip>
             </Grid>
         </Grid>
     </Toolbar>);

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 9672f30628de1b3930968588a643a9d844cda57c..8e46385cc9cfa694c938c6b1ce5183e32d7f858c 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -78,13 +78,13 @@ export const CollectionPanel = withStyles(styles)(
                         <CardHeader
                             avatar={<CollectionIcon className={classes.iconHeader} />}
                             action={
-                                <IconButton
-                                    aria-label="More options"
-                                    onClick={this.handleContextMenu}>
-                                    <Tooltip title="More options">
+                                <Tooltip title="More options">
+                                    <IconButton
+                                        aria-label="More options"
+                                        onClick={this.handleContextMenu}>
                                         <MoreOptionsIcon />
-                                    </Tooltip>
-                                </IconButton>
+                                    </IconButton>
+                                </Tooltip>
                             }
                             title={item && item.name}
                             subheader={item && item.description} />

diff --git a/src/views/process-log-panel/process-log-main-card.tsx b/src/views/process-log-panel/process-log-main-card.tsx
index 626568d179e2e6a4428f52db8952bcd5d95f1483..397f0378224df4c3827d5f64b36a29179f8df759 100644 (file)
--- a/src/views/process-log-panel/process-log-main-card.tsx
+++ b/src/views/process-log-panel/process-log-main-card.tsx
@@ -73,11 +73,11 @@ export const ProcessLogMainCard = withStyles(styles)(
                 <CardHeader
                     avatar={<ProcessIcon className={classes.iconHeader} />}
                     action={
-                        <IconButton onClick={event => onContextMenu(event, process)} aria-label="More options">
-                            <Tooltip title="More options">
+                        <Tooltip title="More options">
+                            <IconButton onClick={event => onContextMenu(event, process)} aria-label="More options">
                                 <MoreOptionsIcon />
-                            </Tooltip>
-                        </IconButton>}
+                            </IconButton>
+                        </Tooltip>}
                     title={
                         <Tooltip title={process.containerRequest.name} placement="bottom-start">
                             <Typography noWrap variant="title" className={classes.title}>

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index fea94b904341958f2b3edb0a07754a823a97a349..40fd8b229681ff38abd14125450e812e1767d564 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -86,13 +86,13 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                         <Chip label={getProcessStatus(process)}
                             className={classes.chip}
                             style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
-                        <IconButton
-                            aria-label="More options"
-                            onClick={event => onContextMenu(event)}>
-                            <Tooltip title="More options">
+                        <Tooltip title="More options">
+                            <IconButton
+                                aria-label="More options"
+                                onClick={event => onContextMenu(event)}>
                                 <MoreOptionsIcon />
-                            </Tooltip>
-                        </IconButton>
+                            </IconButton>
+                        </Tooltip>
                     </div>
                 }
                 title={

diff --git a/src/views/process-panel/process-subprocesses-card.tsx b/src/views/process-panel/process-subprocesses-card.tsx
index 4226fefc8cb9bca9fe1e153cddb3a43194dc793b..54e0206e3624c8b512b8b730e318ffe9bd04228b 100644 (file)
--- a/src/views/process-panel/process-subprocesses-card.tsx
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@ -83,14 +83,14 @@ export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
                         <Typography noWrap variant="body2" className={classes.status}>
                             {getProcessStatus(subprocess)}
                         </Typography>
-                        <IconButton
-                            className={classes.options}
-                            aria-label="More options"
-                            onClick={onContextMenu}>
-                            <Tooltip title="More options">
+                        <Tooltip title="More options">
+                            <IconButton
+                                className={classes.options}
+                                aria-label="More options"
+                                onClick={onContextMenu}>
                                 <MoreOptionsIcon />
-                            </Tooltip>
-                        </IconButton>
+                            </IconButton>
+                        </Tooltip>
                     </div>
                 }
                 title={

diff --git a/src/views/trash-panel/trash-panel.tsx b/src/views/trash-panel/trash-panel.tsx
index db7d8f688096e34cb80ca4a1e7bc796b1e0d11bb..e627f4f26bcddbd32117934f93c08fd9fa80128f 100644 (file)
--- a/src/views/trash-panel/trash-panel.tsx
+++ b/src/views/trash-panel/trash-panel.tsx
@@ -63,20 +63,20 @@ export const ResourceRestore =
         const resource = getResource<TrashableResource>(props.uuid)(state.resources);
         return { resource, dispatch: props.dispatch };
     })((props: { resource?: TrashableResource, dispatch?: Dispatch<any> }) =>
-        <IconButton onClick={() => {
-            if (props.resource && props.dispatch) {
-                props.dispatch(toggleTrashed(
-                    props.resource.kind,
-                    props.resource.uuid,
-                    props.resource.ownerUuid,
-                    props.resource.isTrashed
-                ));
-            }
-        }}>
-            <Tooltip title="Restore">
+        <Tooltip title="Restore">
+            <IconButton onClick={() => {
+                if (props.resource && props.dispatch) {
+                    props.dispatch(toggleTrashed(
+                        props.resource.kind,
+                        props.resource.uuid,
+                        props.resource.ownerUuid,
+                        props.resource.isTrashed
+                    ));
+                }
+            }}>
                 <RestoreFromTrashIcon />
-            </Tooltip>
-        </IconButton>
+            </IconButton>
+        </Tooltip>
     );
 
 export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [