Update price button accessibility in header (#1857)
* Update price button accessibility * Updated accName and accDescription for speech dictation and screen reader users. * Update price.js Replace double quote with single * Update price.js Remove trailing spaces * make .visually-hidden global, use className rather than class * make accessible button component --------- Co-authored-by: Jason Hester <jhester@TPGLPT-LTC23.attlocal.net> Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
parent
be7c702602
commit
2dfde257d2
@ -44,6 +44,15 @@ export function PriceProvider ({ price, children }) {
|
||||
)
|
||||
}
|
||||
|
||||
function AccessibleButton ({ id, description, children, ...props }) {
|
||||
return (
|
||||
<div>
|
||||
<button {...props} aria-describedby={id}>{children}</button>
|
||||
<div id={id} className='visually-hidden'>{description}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Price ({ className }) {
|
||||
const [selection, handleClick] = usePriceCarousel()
|
||||
|
||||
@ -56,53 +65,53 @@ export default function Price ({ className }) {
|
||||
if (selection === 'yep') {
|
||||
if (!price || price < 0) return null
|
||||
return (
|
||||
<div className={compClassName} onClick={handleClick} variant='link'>
|
||||
<AccessibleButton id='yep-hint' description='Show 1 satoshi equals 1 satoshi' className={compClassName} onClick={handleClick} variant='link'>
|
||||
{fixedDecimal(100000000 / price, 0) + ` sats/${fiatSymbol}`}
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
)
|
||||
}
|
||||
|
||||
if (selection === '1btc') {
|
||||
return (
|
||||
<div className={compClassName} onClick={handleClick} variant='link'>
|
||||
<AccessibleButton id='1btc-hint' description='Show blockheight' className={compClassName} onClick={handleClick} variant='link'>
|
||||
1sat=1sat
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
)
|
||||
}
|
||||
|
||||
if (selection === 'blockHeight') {
|
||||
if (blockHeight <= 0) return null
|
||||
return (
|
||||
<div className={compClassName} onClick={handleClick} variant='link'>
|
||||
<AccessibleButton id='blockHeight-hint' description='Show fee rate' className={compClassName} onClick={handleClick} variant='link'>
|
||||
{blockHeight}
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
)
|
||||
}
|
||||
|
||||
if (selection === 'halving') {
|
||||
if (!halving) return null
|
||||
return (
|
||||
<div className={compClassName} onClick={handleClick} variant='link'>
|
||||
<AccessibleButton id='halving-hint' description='Show fiat price' className={compClassName} onClick={handleClick} variant='link'>
|
||||
<CompactLongCountdown date={halving} />
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
)
|
||||
}
|
||||
|
||||
if (selection === 'chainFee') {
|
||||
if (chainFee <= 0) return null
|
||||
return (
|
||||
<div className={compClassName} onClick={handleClick} variant='link'>
|
||||
<AccessibleButton id='chainFee-hint' description='Show time until halving' className={compClassName} onClick={handleClick} variant='link'>
|
||||
{chainFee} sat/vB
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
)
|
||||
}
|
||||
|
||||
if (selection === 'fiat') {
|
||||
if (!price || price < 0) return null
|
||||
return (
|
||||
<div className={compClassName} onClick={handleClick} variant='link'>
|
||||
<AccessibleButton id='fiat-hint' description='Show price in satoshis per fiat unit' className={compClassName} onClick={handleClick} variant='link'>
|
||||
{fiatSymbol + fixedDecimal(price, 0)}
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -985,6 +985,17 @@ div[contenteditable]:focus,
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user