mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Minor accessibility improvements 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
groups
marcin mikołajczak 2021-07-03 12:43:56 +02:00
rodzic a184ee5feb
commit 8f53134b5e
8 zmienionych plików z 22 dodań i 12 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
app/soapbox/components/column_back_button.js
Wyświetl plik

@ -17,9 +17,15 @@ export default class ColumnBackButton extends React.PureComponent {
} }
} }
handleKeyUp = (e) => {
if (e.key === 'Enter') {
this.handleClick();
}
}
render() { render() {
return ( return (
<button onClick={this.handleClick} className='column-back-button'> <button onClick={this.handleClick} onKeyUp={this.handleKeyUp} className='column-back-button'>
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button> </button>

2
app/soapbox/components/column_back_button_slim.js
Wyświetl plik

@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
render() { render() {
return ( return (
<div className='column-back-button--slim'> <div className='column-back-button--slim'>
<div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'> <div role='button' tabIndex='0' onClick={this.handleClick} onKeyUp={this.handleKeyUp} className='column-back-button column-back-button--slim-button'>
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div> </div>

2
app/styles/components/columns.scss
Wyświetl plik

@ -217,7 +217,7 @@
z-index: 3; z-index: 3;
outline: 0; outline: 0;
&:hover { &:hover, &:focus {
text-decoration: underline; text-decoration: underline;
} }
} }

2
app/styles/components/promo-panel.scss
Wyświetl plik

@ -20,7 +20,7 @@
border-bottom: 0; border-bottom: 0;
} }
&:hover { &:hover, &:focus {
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
span { span {

8
app/styles/components/react-toggle.scss
Wyświetl plik

@ -36,7 +36,9 @@
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
.react-toggle.react-toggle--focus:not(.react-toggle--disabled) .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: var(--brand-color--hicontrast); background-color: var(--brand-color--hicontrast);
} }
@ -44,10 +46,6 @@
background-color: var(--brand-color); background-color: var(--brand-color);
} }
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: var(--brand-color--hicontrast);
}
.react-toggle-track-check { .react-toggle-track-check {
position: absolute; position: absolute;
width: 14px; width: 14px;

2
app/styles/components/status.scss
Wyświetl plik

@ -424,7 +424,7 @@
background: var(--brand-color--med); background: var(--brand-color--med);
transition: 0.2s; transition: 0.2s;
&:hover { &:hover, &:focus {
background: hsla(var(--brand-color_hsl), 0.5); background: hsla(var(--brand-color_hsl), 0.5);
text-decoration: none; text-decoration: none;
} }

6
app/styles/components/tabs-bar.scss
Wyświetl plik

@ -152,7 +152,8 @@
background-color: var(--accent-color); background-color: var(--accent-color);
} }
&:hover:not(.react-toggle--disabled) .react-toggle-track { &:hover:not(.react-toggle--disabled) .react-toggle-track,
&.react-toggle--focus .react-toggle-track {
background-color: var(--accent-color--bright); background-color: var(--accent-color--bright);
} }
} }
@ -250,7 +251,8 @@
} }
&.active::before, &.active::before,
&:hover::before { &:hover::before,
&:focus::before {
height: 30px; height: 30px;
opacity: 1; opacity: 1;

4
app/styles/forms.scss
Wyświetl plik

@ -479,6 +479,10 @@ code {
position: relative; position: relative;
margin-top: 8px; margin-top: 8px;
cursor: pointer; cursor: pointer;
&:focus {
background: var(--accent-color--faint);
}
} }
.select-wrapper { .select-wrapper {