Accessibility fixes

[betsyecastro]

Sets the page language Adds a text alternative to the profile picture, news picture, links such as the email address, location, and phone number Changes the background color of the profile show page, the profile header and cards to fix contrast issues Adds a text alternative to the fields for uploading the pictures in the news section

[betsyecastro]

The profile news edit page still needs some work to navigate through all the buttons via tab key. Currently this is only working for the "Select Image" button through JavaScript. However, the trix-editor buttons need this feature too.

I will continue to work on this to try to make it work without any additional Javascript code.

[gab3]

@betsyecastro: I am wondering if there's an updated version of the rich text editor? I think we could also look at swapping to something more accessible if it doesn't look like it can be addressed easily, as it'll likely be the same amount of effort.

[betsyecastro]

@gab3 I agree with you, there must be an more elegant and accessible alternative. I'll look into that.

[wunc]

@betsyecastro @gab3 @amiranickerson So, apparently the Trix editor originally had the toolbar buttons in the tabindex, but it was removed in https://github.com/basecamp/trix/pull/369 (in which the PR author ironically says it improves accessibility when it actually does the opposite).

There's a simple way to add it back (you would basically do the following, but set them all to "0" instead of "-1": https://github.com/basecamp/trix/issues/322), but that makes tabbing directly into the editor more annoying for non-keyboard-exclusive users.

The actual best balanced solution is a pattern called a "roving tabindex", where you can still tab to the toolbar but then use arrow keys to focus the individual tools so you don't have to tab through each tool just to get to the editor. See the example here: https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/toolbar/toolbar.html However, it's sort of non-trivial to implement. So, this is my long-winded way of saying I think we should just ignore this particular thing for now. 😉

[wunc]

@betsyecastro I improved the "Select Image" by switching it to Bootstrap's "custom filebrowser" style. It still looks decent and is accessible without any custom JS.