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:
jason-me 2025-02-03 19:22:02 -06:00 committed by GitHub
parent be7c702602
commit 2dfde257d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 12 deletions

View File

@ -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>
)
}
}

View File

@ -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;