From 98eba2bbc83b8d4bbce837f75924dbaed2664519 Mon Sep 17 00:00:00 2001
From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Tue, 18 Sep 2018 13:38:19 +0200
Subject: [PATCH] icons-descriptions-are-not-displayed-when-using-TAB

Feature #14206

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
---
 .../collection-panel-files.tsx                |  8 +--
 .../column-selector/column-selector.tsx       | 56 +++++++++----------
 .../data-explorer/data-explorer.tsx           |  8 +--
 .../dropdown-menu/dropdown-menu.tsx           | 16 +++---
 src/components/file-tree/file-tree-item.tsx   | 12 ++--
 src/components/search-bar/search-bar.tsx      |  8 +--
 src/components/search-input/search-input.tsx  | 10 ++--
 .../main-content-bar/main-content-bar.tsx     |  8 +--
 .../collection-panel/collection-panel.tsx     | 12 ++--
 .../process-log-main-card.tsx                 |  8 +--
 .../process-information-card.tsx              | 12 ++--
 .../process-subprocesses-card.tsx             | 14 ++---
 src/views/trash-panel/trash-panel.tsx         | 26 ++++-----
 13 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index b037fcf4..341aa5ac 100644
--- 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 210dc5ae..ccff6181 100644
--- 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 58507fb0..d63d1ccc 100644
--- 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 a00df75d..cd68d5ba 100644
--- 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 9b248e0c..02dd04b4 100644
--- 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 ab25e137..f01b5692 100644
--- 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 da2f3a9b..f2ec2d64 100644
--- 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 ae86fe52..071b986a 100644
--- 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 9672f306..8e46385c 100644
--- 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 626568d1..397f0378 100644
--- 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 fea94b90..40fd8b22 100644
--- 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 4226fefc..54e0206e 100644
--- 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 db7d8f68..e627f4f2 100644
--- 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> = [
-- 
2.30.2