masto-fe/app/javascript/mastodon/components
Gô Shoemake 08e4c78e78 Fix column headers accessibility (#6199)
* Fix accessibility of column headers

As a screen reader user new to Mastodon, I encountered the following issues with the column headers as designed:
 * Jumping between them was difficult. FOr instance, passing my home timeline to reach notification settings was difficult to impossible, especially considering infinite scrolling.
 * There doesn't appear to be any means for triggering the control via the keyboard. the `titleClick` handler only responds to mouse clicks.
 * I didn't even realize there was a Settings toggle until I made this change.

Thanks for using ARIA in your designs. It's a huge help. But adding a `button` role doesn't add keyboard handling and other button behavior. Also, because the role was on the heading container, it obscured the controls within the container itself. This fix resolve that. It also exposes the headings as headings rather than buttons, enabling skipping columns by using screen readers' heading navigation commands.

Since I myself am blind, if this fix requires additional visual styling, I'd like help applying that so it can be merged. I'd consider it an essential accessibility fix for my and other blind users' existence on the platform. Thanks!

* Styling fixes

* Fixed overflow issue
2018-01-15 04:33:06 +01:00
..
__tests__ Replace JavaScript Testing Framework from Mocha to Jest (#5412) 2017-10-16 09:33:08 +02:00
account.js Add validation for onMuteNotifications (#6092) 2017-12-24 17:18:45 +09:00
attachment_list.js Use Class and Property Decorators (#3730) 2017-06-23 19:36:54 +02:00
autosuggest_emoji.js Compress and combine emoji data (#5229) 2017-10-06 03:42:34 +02:00
autosuggest_textarea.js Add aria-autocomplete='list' in Textaria (#5889) 2017-12-05 11:32:00 +01:00
avatar.js Fix GIF avatars not autoplaying when GIF autoplay is enabled (#6000) 2017-12-13 12:14:03 +01:00
avatar_overlay.js Fix GIF avatars not autoplaying when GIF autoplay is enabled (#6000) 2017-12-13 12:14:03 +01:00
button.js Use Class and Property Decorators (#3730) 2017-06-23 19:36:54 +02:00
collapsable.js Add option to reduce motion (#5393) 2017-10-16 09:36:15 +02:00
column.js Fix the usages of Detect Passive Events (#4749) 2017-08-31 11:20:54 +02:00
column_back_button.js Improve accessibility (part 7) (#4457) 2017-07-31 00:18:15 +02:00
column_back_button_slim.js Use Class and Property Decorators (#3730) 2017-06-23 19:36:54 +02:00
column_header.js Fix column headers accessibility (#6199) 2018-01-15 04:33:06 +01:00
display_name.js feat: Cache status height to avoid expensive renders (#4439) 2017-08-07 20:32:03 +02:00
dropdown_menu.js Rename ariaLabel property of Dropdown to title (#5813) 2017-11-25 15:41:08 +01:00
extended_video_player.js Add ability to specify alternative text for media attachments (#5123) 2017-09-28 15:31:31 +02:00
icon_button.js Avoid unnecessary Motion components in icon_button.js (#5544) 2017-10-27 19:08:07 +02:00
intersection_observer_article.js Improve IntersectionObserverArticle perf (#5152) 2017-09-30 14:28:49 +02:00
load_more.js Fix invisible load more button (#4962) 2017-09-16 00:32:43 +02:00
loading_indicator.js Add loading indicator animation (#4316) 2017-07-23 20:28:18 +02:00
media_gallery.js Refactor initial state: reduce_motion and auto_play_gif (#5501) 2017-10-28 00:04:44 +09:00
missing_indicator.js Replace sprockets/browserify with Webpack (#2617) 2017-05-03 02:04:16 +02:00
permalink.js Redesign the landing page, mount public timeline on it (#4122) 2017-07-11 15:27:59 +02:00
relative_timestamp.js Clear timer when unmounting RelativeTimestamp components (#5408) 2017-10-16 03:03:36 +02:00
scrollable_list.js Replace react-router-scroll to react-router-scroll-4 (#5568) 2017-11-01 06:58:38 +09:00
setting_text.js Improve accessibility (part 3) (#4405) 2017-07-28 00:54:48 +02:00
status.js Refactor initial state: "me" (#5563) 2017-10-31 11:27:48 +09:00
status_action_bar.js Rename ariaLabel property of Dropdown to title (#5813) 2017-11-25 15:41:08 +01:00
status_content.js Fix unwanted content warning gap in CSS (#5436) 2017-10-17 20:07:44 +02:00
status_list.js Implement hotkeys for web UI (#5164) 2017-10-06 01:07:59 +02:00