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/
CONSUL DEMOCRACY
Citizen Participation and Open Government Application
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
