Merge pull request #916 from emgage/Next

Next into master (Don't merge it)

src/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import Icon, { Props as IconProps } from '../Icon';
 
 import { BUTTON } from '../ThemeIdentifiers';
 import * as baseTheme from './Button.scss';
+import VisuallyHidden from '../VisuallyHidden';
 
 export type Size = 'slim' | 'large';
 
@@ -105,8 +106,12 @@ const button = ({
     ? <span className={theme.customIcon}><Icon source="caretDown" /></span>
     : null;
 
+  const titleOrAccesibility = title || accessibilityLabel;
   const iconMarkup = icon
-    ? <span className={theme.customIcon}><Icon source={icon} /></span>
+    ? <span className={theme.customIcon}>
+        <Icon source={icon} />
+        {titleOrAccesibility && <VisuallyHidden>{titleOrAccesibility}</VisuallyHidden>}
+      </span>
     : null;
 
   const childMarkup = children ? <span>{children}</span> : null;

src/components/Chip/Chip.tsx

@@ -73,7 +73,7 @@ class Chip extends React.PureComponent<Props, any> {
     const chipTextComponent = (
       <span className={theme.chipContent} key="2">
         {(firstIconComponent || label) &&
-          <Button onClick={clickable && onClick || (() => { })} componentSize="slim" plain componentClass={theme.chipButtonContent}>
+          <Button onClick={clickable && onClick || (() => { })} componentSize="slim" plain componentClass={theme.chipButtonContent} title={label}>
             {firstIconComponent}
             <span className={theme.ChipLabel}>{label}</span>
           </Button>
@@ -85,7 +85,7 @@ class Chip extends React.PureComponent<Props, any> {
     );
 
     const isRemovable = removable &&
-      (<Button componentClass={theme.Remove} aria-label={'Remove ' + children} onClick={onRemove} componentSize="slim" plain>
+      (<Button componentClass={theme.Remove} aria-label={'Remove ' + children} onClick={onRemove} componentSize="slim" plain accessibilityLabel="Remove" title="Remove">
         <Icon source="cancel" theme={theme} />
       </Button>
       );

src/components/Login/Login.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Button from '../Button';
 import Dropdown from '../Dropdown';
 import Image from '../Image';
-import VisuallyHidden from '../VisuallyHidden';
 import * as baseTheme from './Login.scss';
 import { Props as DropdownItemProps } from '../Dropdown/DropdownItem';
 
@@ -79,15 +78,15 @@ export default (props: Props) => {
 
   return (
       props.isLoggedIn ?  <div className={baseTheme.loginContainer}>
-        {!props.profilePic ? <Button icon="user" componentSize="slim" componentClass={baseTheme.loginUser} onClick={e => toggle(e)}><VisuallyHidden>Loged in</VisuallyHidden></Button>
+        {!props.profilePic ? <Button icon="user" componentSize="slim" componentClass={baseTheme.loginUser} onClick={e => toggle(e)} title={`user menu for ${props.userName}`}></Button>
         : <Image onClick={e => toggle(e)} className={baseTheme.profilePic} alt="User profile pic" source={props.profilePic} />}
         <Dropdown
           dropdownItems={dropDownList}
           anchorEl={anchorEl}
           preferredAlignment="right"
           preferredPosition="below"
         />
-      </div> : <Button url={props.loginUrl} componentClass={baseTheme.loginButton} plain >Login</Button>
+      </div> : <Button url={props.loginUrl} componentClass={baseTheme.loginButton} plain title="Login">Login</Button>
   );
 
 };

src/components/NoData/NoData.tsx

@@ -51,7 +51,7 @@ const NoData = ({
             }
 
         </div>
-    );
+  );
 };
 
 export default themr(NODATA, baseTheme)(NoData) as ThemedComponentClass<Props, {}>;

src/components/Pagination/Pagination.tsx

@@ -15,7 +15,7 @@ import * as baseTheme from './Pagination.scss';
 import Label from '../Label';
 import Icon from '../Icon';
 import Select from '../Select';
-
+import VisuallyHidden from '../VisuallyHidden';
 const MAX_PAGER_BUTTONS = 7;
 
 interface IProps {
@@ -204,6 +204,8 @@ class Pagination extends React.PureComponent<IProps, IState> {
           icon="chevronLeft"
           componentClass={theme.button}
           disabled={disableProp}
+          accessibilityLabel="Previous"
+          title="Previous"
         />
       );
     } else if (iconType === 'next') {
@@ -212,6 +214,8 @@ class Pagination extends React.PureComponent<IProps, IState> {
           icon="chevronRight"
           componentClass={theme.button}
           disabled={disableProp}
+          accessibilityLabel="Next"
+          title="Next"
         />
       );
     }
@@ -1035,12 +1039,15 @@ class Pagination extends React.PureComponent<IProps, IState> {
     );
 
     return (
+      <>
+      <VisuallyHidden componentId="pagination_wrap">Pagination</VisuallyHidden>
       <ul
         className={classNames(theme['rc-pagination'], className)}
         style={props.style}
         unselectable="unselectable"
         ref={this.savePaginationNode}
         {...dataOrAriaAttributeProps}
+        aria-labeledby="pagination_wrap"
       >
         {!isHideOnSinglePage && !simplePagination && (
           <>
@@ -1098,6 +1105,7 @@ class Pagination extends React.PureComponent<IProps, IState> {
 
         {this.renderSimplePagination()}
       </ul>
+   </>
     );
   }
 }

src/components/Table/RowAction.tsx

@@ -10,7 +10,6 @@ import Dropdown from '../Dropdown';
 
 import * as baseTheme from './Table.scss';
 import * as Expression from './expression';
-import VisuallyHidden from '../VisuallyHidden';
 
 interface ExpressionFunction {
   (data: any, config: any): boolean;
@@ -83,9 +82,8 @@ class RowAction extends React.PureComponent<Props, State> {
     return (
       validActionConfigs && validActionConfigs.length > 0 ?
       <React.Fragment>
-        <div style={{ float: 'right' }}>
-        <Button componentId={`${componentId}BtnMoreActions`} theme={theme} componentClass={theme.rowActionButton} disabled={actionInProgress} icon="horizontalDots" onClick={(e: React.FormEvent<HTMLElement>) => this.dropdownToggle(e)}>
-          <VisuallyHidden>More Actions</VisuallyHidden>
+        <div style={{ float: 'right', position: 'relative' }}>
+        <Button componentId={`${componentId}BtnMoreActions`} theme={theme} componentClass={theme.rowActionButton} disabled={actionInProgress} icon="horizontalDots" onClick={(e: React.FormEvent<HTMLElement>) => this.dropdownToggle(e)} title="More Actions">
         </Button>
           <Dropdown
             dropdownItems={validActionConfigs}

src/components/Table/Table.tsx

@@ -18,6 +18,7 @@ import NoData from '../NoData';
 import { ColumnConfig, FilterConfig, NestedChild, SortState, ServerSort } from './interface';
 import * as baseTheme from './Table.scss';
 import Spinner from '../Spinner';
+import VisuallyHidden from '../VisuallyHidden';
 
 export type RowSelection = 'checkbox' | 'radio';
 export type SortOrder = 'asc' | 'desc';
@@ -301,7 +302,7 @@ class Table extends React.PureComponent<Props, State> {
               );
             })
           }
-          { rowAction && !rowActionLeft && <TableHead key="headRowAction" theme={theme} />}
+          { rowAction && !rowActionLeft && <TableHead key="headRowAction" theme={theme}><VisuallyHidden>More Options</VisuallyHidden></TableHead>}
         </TableRow>
       </TableHeader>
     );
@@ -314,19 +315,19 @@ class Table extends React.PureComponent<Props, State> {
       noDataInSearchLabel = 'No matches found'
     } = this.props;
     if (isSearching) {
-      return ( 
+      return (
         <NoData iconSource="search" label={noDataInSearchLabel}></NoData>
-      )
-    } else {
+      );
+    }
       return (
         <NoData iconSource="inbox" label={noDataLabel}></NoData>
-      )
-    }
+      );
+
   }
 
   // Function to render tbody & td with specifc data & if user passed any custom component that can also get rendered
   renderBody = () => {
-    const { children, 
+    const { children,
       column,
       expandingRowId = [], hideRow,
       rowAction,
@@ -342,7 +343,7 @@ class Table extends React.PureComponent<Props, State> {
         // </div> :
         <TableBody theme={theme}>
           {
-            
+
             data.map((item: any, index: number) => {
               if (!this.props.hideRow || !this.hideRow(item)) {
                 return this.renderTbodyRows(item, index);

src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -8,11 +8,12 @@ export interface Props {
   children?: React.ReactNode;
   // Theme to be injected via css-themr.
   theme?: any;
+  componentId?:any;
 }
 
-const visuallyHidden = ({ children, theme }: Props) => {
+const visuallyHidden = ({ children, theme, componentId }: Props) => {
   return (
-    <span className={theme.visuallyHidden}>{children}</span>
+    <span className={theme.visuallyHidden} id={componentId}>{children}</span>
   );
 };
 

themes/Delicious/Select.scss

@@ -134,5 +134,5 @@ $input-horizontal-padding: spacing(tighter) * 1.5;
 }
 
 .labelDisabled {
-  color: theme-color(m-grey, 500);
+  color: theme-color(m-grey, 700);
 }

themes/Delicious/TextField.scss

@@ -158,7 +158,7 @@ $spinner-size: rem(20px);
 }
 
 .labelDisabled {
-  color: theme-color(m-grey, 500);
+  color: theme-color(m-grey, 700);
 }
 
 .labelHidden {

types/src/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -3,6 +3,7 @@ import { ThemedComponentClass } from '@friendsofreactjs/react-css-themr';
 export interface Props {
     children?: React.ReactNode;
     theme?: any;
+    componentId?: any;
 }
 declare const _default: ThemedComponentClass<Props, {}>;
 export default _default;