Use landmark regions on columns (#1732)

Closes mastodon#1720

diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx
index 057b1a9af205ee0b3007002eefe263ae0f49d6cb..0e78c5920af80dd2709436997e9583ca909f8729 100644 (file)
--- a/app/assets/javascripts/components/features/ui/components/column.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column.jsx
@@ -64,7 +64,7 @@ const Column = React.createClass({
     }
 
     return (
-      <div className='column' onWheel={this.handleWheel}>
+      <div role='section' className='column' onWheel={this.handleWheel}>
         {header}
         {children}
       </div>

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 de55fa7485af9b9aa4b5de3309f6fda4e6454660..b7052ffaf43d56c7bc1b56ba38b9e9775c5dca9c 100644 (file)
--- a/app/assets/javascripts/components/features/ui/components/column_header.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column_header.jsx
@@ -25,7 +25,7 @@ const ColumnHeader = React.createClass({
     }
 
     return (
-      <div className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}>
+      <div aria-label={type} className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}>
         {icon}
         {type}
       </div>