From 6a6a62f13fd7846ba032543635580980b74ea14c Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Wed, 26 Jul 2017 13:46:53 +0200 Subject: [PATCH] Improve accessibility (part 2) (#4377) * fix(column_header): Invalid ARIA role * fix(column): Remove hidden nodes from the DOM * refactor(column_link): Remove unused property hideOnMobile * fix(column_header): Use aria-pressed * fix(column_header): Make collapsed content not focusable, add focusable property * fix(column_loading): Make header non-focusable * fix(column_settings): Use role to group the toggles --- .../mastodon/components/column_header.js | 13 +++-- .../components/column_settings.js | 56 +++++++++++-------- .../mastodon/features/ui/components/column.js | 12 ++-- .../features/ui/components/column_header.js | 5 +- .../features/ui/components/column_link.js | 6 +- .../features/ui/components/column_loading.js | 2 +- app/javascript/styles/components.scss | 12 ---- 7 files changed, 53 insertions(+), 53 deletions(-) diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 89e2f918..d3256fbe 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -21,6 +21,7 @@ export default class ColumnHeader extends React.PureComponent { icon: PropTypes.string.isRequired, active: PropTypes.bool, multiColumn: PropTypes.bool, + focusable: PropTypes.bool, showBackButton: PropTypes.bool, children: PropTypes.node, pinned: PropTypes.bool, @@ -29,6 +30,10 @@ export default class ColumnHeader extends React.PureComponent { onClick: PropTypes.func, }; + static defaultProps = { + focusable: true, + } + state = { collapsed: true, animating: false, @@ -61,7 +66,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props; + const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -123,12 +128,12 @@ export default class ColumnHeader extends React.PureComponent { } if (children || multiColumn) { - collapseButton = ; + collapseButton = ; } return (
-
+
{title} @@ -138,7 +143,7 @@ export default class ColumnHeader extends React.PureComponent {
-
+
{(!collapsed || animating) && collapsedContent}
diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js index 31cac5bc..88a29d4d 100644 --- a/app/javascript/mastodon/features/notifications/components/column_settings.js +++ b/app/javascript/mastodon/features/notifications/components/column_settings.js @@ -36,40 +36,48 @@ export default class ColumnSettings extends React.PureComponent {
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
); diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js index ce1dca17..2d46264a 100644 --- a/app/javascript/mastodon/features/ui/components/column.js +++ b/app/javascript/mastodon/features/ui/components/column.js @@ -3,6 +3,7 @@ import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; import scrollTop from '../../../scroll'; +import { isMobile } from '../../../is_mobile'; export default class Column extends React.PureComponent { @@ -37,13 +38,12 @@ export default class Column extends React.PureComponent { render () { const { heading, icon, children, active, hideHeadingOnMobile } = this.props; - let columnHeaderId = null; - let header = ''; + const showHeading = !hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)); - if (heading) { - columnHeaderId = heading.replace(/ /g, '-'); - header = ; - } + const columnHeaderId = showHeading && heading.replace(/ /g, '-'); + const header = showHeading && ( + + ); return (
+
{icon} {type}
diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index cbdb6534..ad7ec931 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -2,17 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import Link from 'react-router-dom/Link'; -const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => { +const ColumnLink = ({ icon, text, to, href, method }) => { if (href) { return ( - + {text} ); } else { return ( - + {text} diff --git a/app/javascript/mastodon/features/ui/components/column_loading.js b/app/javascript/mastodon/features/ui/components/column_loading.js index 7ecfaf77..1c405892 100644 --- a/app/javascript/mastodon/features/ui/components/column_loading.js +++ b/app/javascript/mastodon/features/ui/components/column_loading.js @@ -6,7 +6,7 @@ import ColumnHeader from '../../../components/column_header'; const ColumnLoading = ({ title = '', icon = ' ' }) => ( - +
); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 8de45675..a51cd962 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1743,12 +1743,6 @@ &:hover { background: lighten($ui-base-color, 11%); } - - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } } .column-link__icon { @@ -2132,12 +2126,6 @@ button.icon-button.active i.fa-retweet { } } - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } - &:focus, &:active { outline: 0;