Javi Martín 64edfe5c98 Increase links and buttons contrast on focus
The Web Content Accessibility Guidelines version 2.1 added a success
criterion called Non-text Contrast [1], which mentions that the focus
indicator must contrast with the background, and version 2.2 introduced
a specific one regarding focus appearance [2]. According to that
criterion, the focus indicator:

* is at least as large as the area of a 2 CSS pixel thick perimeter of
  the unfocused component or sub-component
* has a contrast ratio of at least 3:1 between the same pixels in the
  focused and unfocused states.

Our current solution for highlighting elements on focus has a couple of
issues:

* It doesn't offer enough contrast against the default white background
  (1.6:1)
* It offers even less contrast against other backgrounds, like the
  homepage banner or the featured proposals/debates

Making the color of the outline darker would increase the contrast
against these backgrounds, but it would reduce the contrast against
other backgrounds like our default brand color.

For this reason, most modern browsers use a special double outline with
two different colors [3], and we're choosing to combine an outline and a
box shadow to emulate it, using the brand color as the second color.

However, this double-colored outline doesn't work so well when focusing
on dark buttons surrounded by a light background, so instead we're using
a triple outline, which works well on any color combination [4]. Since I
feel that making the third outline 2px wide makes the overall outline
too wide, I'm making the inner outline just 1px wide since that's enough
to prevent edge cases.

Note that Foundation adds a transition for the `box-shadow` property on
`select` controls, which gets in the way of the focus we use on the
language selector. So we're removing the transition.

Also note that the box-shadow style didn't work properly with the
box-shadow we added on the `:hover` status on cards, so we're changing
the code in order to cover this case.

Finally, note that the box-shadow isn't displayed properly on multiline
links (in Chrome, not even with `box-decoration-break: clone`), like the
ones in debates/proposals/polls/investments/processes titles, so we're
changing the style of these links to `inline-block`.

[1] https://www.w3.org/TR/WCAG21/#non-text-contrast
[2] https://www.w3.org/TR/WCAG22/#focus-appearance
[3] https://www.sarasoueidan.com/blog/focus-indicators/#examining-(current)-browser-focus-indicators-against-wcag-requirements
[4] https://www.erikkroes.nl/blog/the-universal-focus-state/
2023-10-10 15:03:21 +02:00
2023-09-11 23:40:37 +02:00
2015-07-15 13:32:13 +02:00
2022-11-23 18:31:19 +01:00
2023-03-20 17:07:09 +01:00
2023-09-12 15:17:17 +02:00
2015-08-17 19:55:28 +02:00
2023-09-12 15:17:17 +02:00
2023-08-17 21:13:48 +02:00
2020-08-11 12:13:23 +02:00
2023-09-11 23:40:37 +02:00
2023-08-29 15:53:08 +02:00
2023-09-12 15:17:17 +02:00
2023-10-04 02:04:19 +02:00
2023-09-12 15:17:17 +02:00
2023-10-04 09:56:20 +02:00

CONSUL DEMOCRACY logo

CONSUL DEMOCRACY

Citizen Participation and Open Government Application

Build status Code Climate Coverage Status Crowdin License: AGPL v3

Accessibility conformance A11y issues checked with Rocket Validator

Join the chat at https://gitter.im/consul/consul Help wanted

Knapsack Pro Parallel CI builds for RSpec tests

This is the opensource code repository of the eParticipation website CONSUL DEMOCRACY, originally developed for the Madrid City government eParticipation website, and currently maintained by the open source software community in collaboration with the CONSUL DEMOCRACY Foundation.

Documentation

Check the ongoing documentation to learn more about how to start your own CONSUL DEMOCRACY fork, install it, customize it and learn to use it as an administrator/maintainer.

CONSUL DEMOCRACY Foundation and project website

You can access the main website of the project at http://consuldemocracy.org where you can find information about the use of the platform, the CONSUL DEMOCRACY Foundation, the global community of users and local partners, news, and ways to get more support or get in touch.

Configuration for development and test environments

NOTE: For more detailed instructions check the docs

Prerequisites: install git, Ruby 3.1.4, CMake, pkg-config, shared-mime-info, Node.js and PostgreSQL (>=9.5).

git clone https://github.com/consuldemocracy/consuldemocracy.git
cd consuldemocracy
bundle install
cp config/database.yml.example config/database.yml
cp config/secrets.yml.example config/secrets.yml
bin/rake db:create
bin/rake db:migrate
bin/rake db:dev_seed
RAILS_ENV=test rake db:setup

Run the app locally:

bin/rails s

Run the tests with:

bin/rspec

You can use the default admin user from the seeds file:

user: admin@consul.dev pass: 12345678

But for some actions like voting, you will need a verified user, the seeds file also includes one:

user: verified@consul.dev pass: 12345678

Configuration for production environments

See installer

Current state

Development started on 2015 July 15th. Code was deployed to production on 2015 september 7th to decide.madrid.es. Since then new features are added often. You can take a look at the current features at the project's website and future features at the Roadmap and open issues list.

License

Code published under AFFERO GPL v3 (see LICENSE-AGPLv3.txt)

Contributions

See CONTRIBUTING.md

Description
This is the repository for a demo instance for Nairobi County
Readme 104 MiB
Languages
Ruby 76.1%
HTML 14.6%
SCSS 5.7%
JavaScript 2.3%
Python 1.2%