@ -7,7 +7,7 @@ import { StyledButton } from './styled';
export const PlayButton = ( { text , . . . rest } : any ) = > {
return (
< CustomTooltip text = { text || i18n . t ( 'Play' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { text || i18n . t ( 'Play' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "play" / >
< / StyledButton >
< / CustomTooltip >
@ -17,7 +17,7 @@ export const PlayButton = ({ text, ...rest }: any) => {
export const PlayAppendButton = ( { text , . . . rest } : any ) = > {
return (
< CustomTooltip text = { text || i18n . t ( 'Add to queue (later)' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { text || i18n . t ( 'Add to queue (later)' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "plus" / >
< / StyledButton >
< / CustomTooltip >
@ -27,7 +27,7 @@ export const PlayAppendButton = ({ text, ...rest }: any) => {
export const PlayAppendNextButton = ( { text , . . . rest } : any ) = > {
return (
< CustomTooltip text = { text || i18n . t ( 'Add to queue (next)' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { text || i18n . t ( 'Add to queue (next)' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "plus-circle" / >
< / StyledButton >
< / CustomTooltip >
@ -37,7 +37,7 @@ export const PlayAppendNextButton = ({ text, ...rest }: any) => {
export const PlayShuffleAppendButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Add shuffled to queue' ) } onClick = { rest . onClick } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Add shuffled to queue' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "plus-square" / >
< / StyledButton >
< / CustomTooltip >
@ -47,7 +47,7 @@ export const PlayShuffleAppendButton = ({ ...rest }) => {
export const SaveButton = ( { text , . . . rest } : any ) = > {
return (
< CustomTooltip text = { text || i18n . t ( 'Save' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { text || i18n . t ( 'Save' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "save" / >
< / StyledButton >
< / CustomTooltip >
@ -57,7 +57,7 @@ export const SaveButton = ({ text, ...rest }: any) => {
export const EditButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Edit' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Edit' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "edit2" / >
< / StyledButton >
< / CustomTooltip >
@ -67,7 +67,7 @@ export const EditButton = ({ ...rest }) => {
export const UndoButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Reset' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Reset' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "undo" / >
< / StyledButton >
< / CustomTooltip >
@ -77,7 +77,7 @@ export const UndoButton = ({ ...rest }) => {
export const DeleteButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Delete' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Delete' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "trash" / >
< / StyledButton >
< / CustomTooltip >
@ -87,7 +87,11 @@ export const DeleteButton = ({ ...rest }) => {
export const FavoriteButton = ( { isFavorite , . . . rest } : any ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Toggle favorite' ) } >
< StyledButton tabIndex = { 0 } { ...rest } >
< StyledButton
aria - label = { isFavorite ? i18n . t ( 'Remove from favorites' ) : i18n . t ( 'Add to favorites' ) }
tabIndex = { 0 }
{ . . . rest }
>
< Icon icon = { isFavorite ? 'heart' : 'heart-o' } / >
< / StyledButton >
< / CustomTooltip >
@ -101,7 +105,15 @@ export const DownloadButton = ({ downloadSize, ...rest }: any) => {
downloadSize ? i18n . t ( 'Download ({{downloadSize}})' , { downloadSize } ) : i18n . t ( 'Download' )
}
>
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton
aria - label = {
downloadSize
? i18n . t ( 'Download ({{downloadSize}})' , { downloadSize } )
: i18n . t ( 'Download' )
}
{ . . . rest }
tabIndex = { 0 }
>
< Icon icon = "download" / >
< / StyledButton >
< / CustomTooltip >
@ -111,7 +123,7 @@ export const DownloadButton = ({ downloadSize, ...rest }: any) => {
export const ShuffleButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Shuffle queue' ) } >
< StyledButton tabIndex = { 0 } { ...rest } >
< StyledButton aria - label = { i18n . t ( 'Shuffle queue' ) } tabIndex = { 0 } { ...rest } >
< Icon icon = "random" / >
< / StyledButton >
< / CustomTooltip >
@ -121,7 +133,7 @@ export const ShuffleButton = ({ ...rest }) => {
export const ClearQueueButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Clear queue' ) } >
< StyledButton tabIndex = { 0 } { ...rest } >
< StyledButton aria - label = { i18n . t ( 'Clear queue' ) } tabIndex = { 0 } { ...rest } >
< Icon icon = "trash2" / >
< / StyledButton >
< / CustomTooltip >
@ -158,7 +170,7 @@ export const FilterButton = ({ ...rest }) => {
export const AutoPlaylistButton = ( { noText , . . . rest } : any ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Auto playlist' ) } >
< StyledButton tabIndex = { 0 } { ...rest } >
< StyledButton aria - label = { i18n . t ( 'Auto playlist' ) } tabIndex = { 0 } { ...rest } >
< Icon icon = "plus-square" style = { { marginRight : noText ? '0px' : '10px' } } / >
{ ! noText && i18n . t ( 'Auto playlist' ) }
< / StyledButton >
@ -169,7 +181,7 @@ export const AutoPlaylistButton = ({ noText, ...rest }: any) => {
export const MoveUpButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Move selected up' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Move selected up' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "angle-up" / >
< / StyledButton >
< / CustomTooltip >
@ -179,7 +191,7 @@ export const MoveUpButton = ({ ...rest }) => {
export const MoveDownButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Move selected down' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Move selected down' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "angle-down" / >
< / StyledButton >
< / CustomTooltip >
@ -189,7 +201,7 @@ export const MoveDownButton = ({ ...rest }) => {
export const MoveTopButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Move selected to top' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Move selected to top' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "arrow-up2" / >
< / StyledButton >
< / CustomTooltip >
@ -199,7 +211,7 @@ export const MoveTopButton = ({ ...rest }) => {
export const MoveBottomButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Move selected to bottom' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Move selected to bottom' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "arrow-down2" / >
< / StyledButton >
< / CustomTooltip >
@ -209,7 +221,7 @@ export const MoveBottomButton = ({ ...rest }) => {
export const RemoveSelectedButton = ( { . . . rest } ) = > {
return (
< CustomTooltip text = { i18n . t ( 'Remove selected' ) } >
< StyledButton { ...rest } tabIndex = { 0 } >
< StyledButton aria - label = { i18n . t ( 'Remove selected' ) } { ...rest } tabIndex = { 0 } >
< Icon icon = "close" / >
< / StyledButton >
< / CustomTooltip >