Commit Graph

13 Commits

Author SHA1 Message Date
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
りんすき
d556be2968 Fix column design broken with very long title (#5493)
* Fix #5314

* fix not beautiful code

* fix broken design with mobile view

* remove no longer needed code
2017-10-26 22:52:48 +09:00
Eugen Rochko
ebb8c89207 Upgrade to React 16 (#5119)
* Upgrade to React 16.0.0

* Disable some uncritical tests while chai-enzyme remains incompatible
2017-09-30 04:29:56 +02:00
Sorin Davidoi
6884dd79ba Improve accessibility (part 3) (#4405)
* fix(compose): Add aria-label for the navigation links

* fix(search): Add input label

* fix(navigation_bar): Link description

* fix(autosuggest_textarea): Add input label

* fix(compose_form): Add input label

* fix(upload_button): Add input label

* fix(account/header): Add link content

* fix(column_header): Use h1 tag

* fix(column_header): Labels move buttons moving column

* fix(settings_text): Add label to input

* fix(column_header): Remove role from h1

* fix(modal_root): Use role=dialog

* fix(modal_root): Focus restauration

* fix(modal_root): Apply inert to sibligs

* fix(column_header): Add role=button

* chore(eslint): Disable jsx-a11y/label-has-for
2017-07-28 00:54:48 +02:00
Sorin Davidoi
6a6a62f13f 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
2017-07-26 13:46:53 +02:00
Sorin Davidoi
2f8bfb3d38 Improve accessibility (#4369)
* fix(compose): Use nav and remove redundant aria-label

* fix(tabs_tab): Use nav and add aria-label

* fix(app): Add aria-label for settings toggle button

* chore: Run yarn manage:translations
2017-07-26 02:01:27 +02:00
Sorin Davidoi
fc4c74660b Swipeable views (#4105)
* feat: Replace react-swipeable with react-swipeable-views

* fix: iOS 9
2017-07-09 15:02:26 +02:00
unarist
21c2bc119c Clean column collapsible (#3931)
* Remove unused column_collapsable.js
* Remove old styles
* Extract `> div`  style to independent class
2017-06-24 23:18:11 +02:00
Yamagishi Kazutoshi
c1a8e3d1eb Use Class and Property Decorators (#3730)
ref https://tc39.github.io/proposal-decorators/
2017-06-23 19:36:54 +02:00
Sorin Davidoi
8f03fdce7f Upgrade React Router (#3677)
* chore(yarn): Remove react-router

* chore(yarn): Remove react-router-scroll

* chore(yarn): Remove history

* chore(yarn): Add react-router-dom

* chore: Remove usages of react-router-scroll

* refactor: Upgrade to react-router-web

* refactor: Use fork of react-router-scroll

This reverts commit 2ddea9a6c8d39fc64b7d0b587f3fbda7a45a7fa2.

* fix: Issues mentions in the PR feedback
2017-06-20 20:40:03 +02:00
Eugen Rochko
37dbfa4cd7 Unread indicator was invisible behind column header, adjusted (#3720)
* Unread indicator was invisible behind column header, adjusted

* Unread indicator now a CSS pseudo-element

* Adjust flex
2017-06-12 20:02:17 +02:00
unarist
61fcdbbf7e Add back button to hashtag timeline again (#3587) 2017-06-05 17:10:40 +02:00
Eugen Rochko
8ee2eb5d2e Allow mounting arbitrary columns (#3207)
* Allow mounting arbitrary columns

* Refactor column headers, allow pinning/unpinning and moving columns around

* Collapse animation

* Re-introduce scroll to top

* Save column settings properly, do not display pin options in
single-column view, do not display collapse icon if there is
nothing to collapse

* Fix one instance of public timeline being closed closing the stream
Fix back buttons inconsistently sending you back to / even if history exists

* Getting started displays links to columns that are not mounted
2017-06-04 01:39:38 +02:00