Skip to content

[UI-Library][FieldContrastColorPicker] Create a New Accessible Form Component. #11169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Godoy0722 opened this issue Mar 24, 2025 · 7 comments · May be fixed by #11170 or pkp/ui-library#567
Open

[UI-Library][FieldContrastColorPicker] Create a New Accessible Form Component. #11169

Godoy0722 opened this issue Mar 24, 2025 · 7 comments · May be fixed by #11170 or pkp/ui-library#567
Assignees
@Godoy0722
Labels
Accessibility Any issue that impacts assistive technology or users with visual or physical impairments.
Milestone
3.5.0-x

Comments

@Godoy0722
Copy link
Contributor

Issue Description

This issue intends to create a form field to help users to choose colors with a good contrast between them.

The FieldContrastColorPicker component provides two color pickers that allow users to select two colors. It calculates the contrast ratio between these colors according to WCAG guidelines and displays flags indicating whether the current contrast meets each WCAG category. Additionally, the component offers a live preview section where the first color is used as the background and the second as the text color.

How to reproduce / Current behavior

  1. After pulling this commit, you need to run npm run build or npm run dev in order to get this component built and ready for use.
  2. You can set, as an example, the following field as a theme option for the default theme like this:
$this->addOption('colorScheme', 'FieldContrastColorPicker', [
            'label' => __('plugins.themes.default.option.colorScheme.label'),
            'description' => __('plugins.themes.default.option.colorScheme.description'),
        ]);
  1. With this the theme is already working, but you can also create a hook to manage the colors:
// ... init() function

Hook::add('TemplateManager::display', [$this, 'schemeColors']);

// ...

public function schemeColors($hookName, $args)
    {
        $templateMgr = $args[0];
        $objColorScheme = json_decode($this->getOption('colorScheme'));
        $templateMgr->assign([
            'color1' => $objColorScheme->color1,
            'color2' => $objColorScheme->color2,
        ]);
    }
  1. After setting up, you can use the $color1 and $color2 variables inside the .tpl files.

What application are you using?

OJS 3.5
@Godoy0722 Godoy0722 added the Accessibility Any issue that impacts assistive technology or users with visual or physical impairments. label Mar 24, 2025
This was referenced Mar 24, 2025
Open
Open
@Godoy0722
Copy link
Contributor Author

Hello @jardakotesovec and @Devika008 !

I created this issue after a few conversations with Michael and Israel, mostly. The idea was to create a Form component that could help anyone who uses it to choose colors that have a good contrast each other. This component is actually an extension of our ColorPicker form component, but with some additional features:

  • You will see two color pickers, that give the user the freedom to choose any color they want to use.
  • In the right section of this row, you will see two main pieces of information: the actual contrast value between both colors and a live preview in case you want to use the first color as a background, and the second color as the text color. This way is a practical way to show the user how the contrast works.
  • Finally, in the second row, you have WCAG contrast categories that the component is comparing. So, for each contrast level, the component is telling you if the contrast is accepted or not for each category.

The component is already working, but I'm opening this issue to open a discussion and possible improvements for this component if it's accepted in the future.

I'm pinging @mfelczak and @israelcefrin as well as they both participated on the previous discussions too, if they want to add more comments here. Please let me know your thoughts about this component!

@jardakotesovec
Copy link
Contributor

@Godoy0722 Thats great, can you add some screenshots if you have component already working?

@Godoy0722
Copy link
Contributor Author

Of course! Here`s the component working I recorded.

Gravacao.de.tela.de.2025-03-20.17-45-38.webm

@kaitlinnewson
Copy link
Member

Hi @Godoy0722, following along on this as I have a general interest in the area. One small suggestion would be a link (or links) that explain more information - for example, we can't assume that the user knows what Level AA/AAA contrast mean, so a way for them to better understand would be useful. It could be a link to our own docs, e.g. https://docs.pkp.sfu.ca/accessible-content/en/principles#contrast-ratio.

I was also wondering about the "Enhanced" and "Maximum" levels - those could possibly be removed to simplify the component (if we assume most users concerned about this want to meet one of the standards). If those were removed, then maybe you would want to move the "Text" and "Ratio" area below the colour selectors, perhaps side-by-side instead.

@israelcefrin
Copy link
Contributor

Hi @Godoy0722

I've installed on my testing instance and it works fine. The info on contrast ratio seems pretty useful and I ditto to @kaitlinnewson on including links to our own docs explaining what is the purpose of keeping a minimum contrast level.

Also, I have to say that even though it is possible to use the keyboard to set hex color codes, I couldn't change or set colours using the keyboard only-navigation. I mean, users will always need a mouse to interact with it.
Given we are still on the prototyping stage, I would like to ask if we could have something similar to this:
https://vue-accessible-color-picker.netlify.app/

Please, notice that you can either manipulate the controls using the mouse or the keyboard. I haven't tested it using my screenreader yet, but I will do it and post my comments as well.

@Godoy0722
Copy link
Contributor Author

Hello folks.

Just a heads-up that I updated my branch on both ui-library and pkp-lib to improve accessibility. @kaitlinnewson and @israelcefrin, I added your suggestions on the component so you can also take a look at them. Now, you can move both the saturation and the hue pointers with the keyboard. I will still work a bit more on these features as I believe I can improve this behavior, despite it is working now.

@Godoy0722
Copy link
Contributor Author

Hello folks! This is just a heads-up that I have been working on major upgrades for this component, which include:

  • Creating the color picker component without using a third-party library, which gives us full control of the features we can add to it.
  • Accessibility issues for the component itself
  • UI updates mainly for the color pickers.

After this, I believe the component is ready to be reviewed. @israelcefrin, @kaitlinnewson , @jardakotesovec , if you want to take a look, you can see these two PRs for this component:

Please feel free to reach out to me if you have any questions or suggestions!

This was linked to pull requests May 12, 2025
Add the FieldContrastColorPicker as a form field #11170
Open
Add the FieldContrastColorPicker as a form field pkp/ui-library#567
Open
@jonasraoni jonasraoni modified the milestones: 3.5 Internal, 3.5.0-x May 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Godoy0722 Godoy0722

Labels
Accessibility Any issue that impacts assistive technology or users with visual or physical impairments.
Projects
None yet
Milestone
3.5.0-x
5 participants
@jonasraoni @jardakotesovec @israelcefrin @kaitlinnewson @Godoy0722