diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 8d1ce90ad..0d8e4879a 100644 --- a/src/components/Button/Button.tsx +++ b/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 = ({ ? : null; + const titleOrAccesibility = title || accessibilityLabel; const iconMarkup = icon - ? + ? + + {titleOrAccesibility && {titleOrAccesibility}} + : null; const childMarkup = children ? {children} : null; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index d38d98a16..1868d8a37 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -73,7 +73,7 @@ class Chip extends React.PureComponent { const chipTextComponent = ( {(firstIconComponent || label) && - { })} componentSize="slim" plain componentClass={theme.chipButtonContent}> + { })} componentSize="slim" plain componentClass={theme.chipButtonContent} title={label}> {firstIconComponent} {label} @@ -85,7 +85,7 @@ class Chip extends React.PureComponent { ); const isRemovable = removable && - ( + ( ); diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx index eba2b22a4..caa267111 100644 --- a/src/components/Login/Login.tsx +++ b/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,7 +78,7 @@ export default (props: Props) => { return ( props.isLoggedIn ? - {!props.profilePic ? toggle(e)}>Loged in + {!props.profilePic ? toggle(e)} title={`user menu for ${props.userName}`}> : toggle(e)} className={baseTheme.profilePic} alt="User profile pic" source={props.profilePic} />} { preferredAlignment="right" preferredPosition="below" /> - : Login + : Login ); }; diff --git a/src/components/NoData/NoData.tsx b/src/components/NoData/NoData.tsx index 06d91c781..b7f0f9671 100644 --- a/src/components/NoData/NoData.tsx +++ b/src/components/NoData/NoData.tsx @@ -51,7 +51,7 @@ const NoData = ({ } - ); + ); }; export default themr(NODATA, baseTheme)(NoData) as ThemedComponentClass; diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index ca275ec27..beaf05f49 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/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 { icon="chevronLeft" componentClass={theme.button} disabled={disableProp} + accessibilityLabel="Previous" + title="Previous" /> ); } else if (iconType === 'next') { @@ -212,6 +214,8 @@ class Pagination extends React.PureComponent { icon="chevronRight" componentClass={theme.button} disabled={disableProp} + accessibilityLabel="Next" + title="Next" /> ); } @@ -1035,12 +1039,15 @@ class Pagination extends React.PureComponent { ); return ( + <> + Pagination {!isHideOnSinglePage && !simplePagination && ( <> @@ -1098,6 +1105,7 @@ class Pagination extends React.PureComponent { {this.renderSimplePagination()} + > ); } } diff --git a/src/components/Table/RowAction.tsx b/src/components/Table/RowAction.tsx index fa8f5b6f1..6d8a2c2b0 100644 --- a/src/components/Table/RowAction.tsx +++ b/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 { return ( validActionConfigs && validActionConfigs.length > 0 ? - - ) => this.dropdownToggle(e)}> - More Actions + + ) => this.dropdownToggle(e)} title="More Actions"> { ); }) } - { rowAction && !rowActionLeft && } + { rowAction && !rowActionLeft && More Options} ); @@ -314,19 +315,19 @@ class Table extends React.PureComponent { noDataInSearchLabel = 'No matches found' } = this.props; if (isSearching) { - return ( + return ( - ) - } else { + ); + } return ( - ) - } + ); + } // 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 { // : { - + data.map((item: any, index: number) => { if (!this.props.hideRow || !this.hideRow(item)) { return this.renderTbodyRows(item, index); diff --git a/src/components/VisuallyHidden/VisuallyHidden.tsx b/src/components/VisuallyHidden/VisuallyHidden.tsx index 0010fe3fb..08cb51262 100755 --- a/src/components/VisuallyHidden/VisuallyHidden.tsx +++ b/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 ( - {children} + {children} ); }; diff --git a/themes/Delicious/Select.scss b/themes/Delicious/Select.scss index e5394b313..ddbd9a30d 100755 --- a/themes/Delicious/Select.scss +++ b/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); } diff --git a/themes/Delicious/TextField.scss b/themes/Delicious/TextField.scss index 600daa561..e765a08d0 100644 --- a/themes/Delicious/TextField.scss +++ b/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 { diff --git a/types/src/components/VisuallyHidden/VisuallyHidden.d.ts b/types/src/components/VisuallyHidden/VisuallyHidden.d.ts index a24b0eacc..57d6b5752 100644 --- a/types/src/components/VisuallyHidden/VisuallyHidden.d.ts +++ b/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; export default _default;