This commit removes aria-pressed attribute from all elements which
contents or other descriptive attributes change in active state,
effectively replacing the meaning of the button, in which case
aria-pressed, an attribute specified whether the button is currently
pressed, would create a confusion. (Spoiler: it's everywhere).
See https://github.com/mastodon/mastodon/issues/13545#issuecomment-1304886969
* Make focus visible on switches and text buttons in columns settings
* Make hover/focus visible on left/right arrows in columns settings
Use same style as for station action bar (reply/boost/fav/etc.)
* Tab first to “Pin/Unpin” before left/right arrows in columns settings
* Add notification permission handling code
* Request notification permission when enabling any notification setting
* Add badge to notification settings when permissions insufficient
* Disable alerts by default, requesting permission and enable them on onboarding
* Refactor uses of icons to an Icon component in web UI
* Refactor options passed to the Icon component
* Make tests work with absolute component paths
* Revert "Fix some icon names changed by the Font Awesome 5. (#8796)"
This reverts commit 3f9ec3de82.
* Revert "Migrate to font-awesome 5.0. (#8799)"
This reverts commit 8bae14591b.
* Revert "Fix some icons names, unavailable in fontawesome5 (free license). (#8792)"
This reverts commit b9c727a945.
* Revert "Update the icon name changed by the Font Awesome 5. (#8776)"
This reverts commit 17af4d27da.
* Revert "Add bot icon to bot avatars and migrate to newer version of Font Awesome (#8484)"
This reverts commit 4b794e134d.
* 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
* 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
* 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
* 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
Sasha Sorokin