From 4cfc15556016c886aa0f385ea664680647e31aca Mon Sep 17 00:00:00 2001 From: Stephen Burgess Date: Sat, 22 Apr 2017 10:30:35 -0500 Subject: [PATCH] Improve aria support - Columns and Navigation Drawer Icons (#2299) * feat(aria): Add aria-labels to underlabelled tab nav items The drawer tabs which control primary navigation are only labelled by a title which is not available to many screenreaders. Add an aria-label attribute to each link to improve readability with screenreaders. Organize link attributes so link target is first followed by classname. Issue #1349 * feat(aria): Replace abstract aria role of section with region Abstract aria roles such as section should not be used in content. Use non-abstract 'region' aria role instead. That role expects an aria-labelledby attribute with an id. Pass an ID to the column header. Remove the aria-label attribute on the ColumnHeader because the same value is output in plaintext as its child. Issue #1349 * fix(aria): Remove aria-controls attribute until solution is found Columns do not have wrappers, so these icons can't point to a column wrapper which it controls. Instead these icons function as triggers to show or hide individual columns. #1349 * fix(typo): Remove type of aria-labelledby instead of aria-label --- .../javascripts/components/features/compose/index.jsx | 10 +++++----- .../components/features/ui/components/column.jsx | 7 ++++--- .../features/ui/components/column_header.jsx | 7 ++++--- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/components/features/compose/index.jsx b/app/assets/javascripts/components/features/compose/index.jsx index eee5c440a4..cad14e1725 100644 --- a/app/assets/javascripts/components/features/compose/index.jsx +++ b/app/assets/javascripts/components/features/compose/index.jsx @@ -40,11 +40,11 @@ class Compose extends React.PureComponent { if (withHeader) { header = (
- - - - - + + + + +
); } diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index 4dad7f7213..aa09d0fd20 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -54,14 +54,15 @@ class Column extends React.PureComponent { render () { const { heading, icon, children, active, hideHeadingOnMobile } = this.props; + let columnHeaderId = null let header = ''; if (heading) { - header = ; + columnHeaderId = heading.replace(/ /g, '-') + header = ; } - return ( -
+
{header} {children}
diff --git a/app/assets/javascripts/components/features/ui/components/column_header.jsx b/app/assets/javascripts/components/features/ui/components/column_header.jsx index 454cce9c2e..c4e6b4afa2 100644 --- a/app/assets/javascripts/components/features/ui/components/column_header.jsx +++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx @@ -12,7 +12,7 @@ class ColumnHeader extends React.PureComponent { } render () { - const { type, active, hideOnMobile } = this.props; + const { type, active, hideOnMobile, columnHeaderId } = this.props; let icon = ''; @@ -21,7 +21,7 @@ class ColumnHeader extends React.PureComponent { } return ( -
+
{icon} {type}
@@ -35,7 +35,8 @@ ColumnHeader.propTypes = { type: PropTypes.string, active: PropTypes.bool, onClick: PropTypes.func, - hideOnMobile: PropTypes.bool + hideOnMobile: PropTypes.bool, + columnHeaderId: PropTypes.string }; export default ColumnHeader;