Fix accessibility issues suggested by WAVE

[ankurjuneja]

Rationale

https://github.com/LabKey/internal-issues/issues/878

Related Pull Requests

Changes

[labkey-jeckels]

I think we can wait for the next version bump to pick up these changes. Cory, let us know if you disagree.

[cnathe]

We don't really bump the @labkey/themes version too often, so in this case I might suggest that we do bump it with this PR and then put that updated version into the platform/core/package.json to get it applied.

That said, I did apply the changes via an alpha package version just to see how it looks. Here is the comparison: @labkey-jeckels @labkey-keegang @ankurjuneja

SEATTLE THEME

before

after

OVERCAST THEME

before

after

[labkey-jeckels]

Thanks Cory. The text/tab contrast is much better, but the tab/background contrast is now very low or maybe non-existent. Do we want to adjust that further, or add a border around the tab? @labkey-keegang

[cnathe]

There is some discussions going on regarding the updates. I think we should get an alpha package version of this change and put it into the platform/core package.json so that @labkey-keegang can take a look at this and the other themes. Let me know if you want me to do that step.

[labkey-jeckels]

There is some discussions going on regarding the updates. I think we should get an alpha package version of this change and put it into the platform/core package.json so that @labkey-keegang can take a look at this and the other themes. Let me know if you want me to do that step.

Yes please. These colors are probably used in places other than the folder tabs, so it's worth seeing how things look a bit more generally.

[labkey-keegang]

I agree that the inactive tabs could stand out more. After looking at a few options, I think keeping the old tab background color and making the text darker works best.

Seattle and Overcast Themes:

Changes:

• All tab text: #0B4161
• Inactive tab BG: #73B6E0

I also checked the other themes for accessibility and found a few issues. Here are the updates to make:

Harvest

Changes:

• Logo, icons, menu, and tab text: #381A00
• Inactive tab BG: #FFAC69

Leaf

Changes:

• Logo, icons, menu, and tab text: #000000
• Secondary Header BG: #64803C
• Inactive tab BG: #A6BF86

Mono

Changes:

• Top BG: #757575
• Inactive Tab BG: #C2C2C2

Ocean

Changes:

• Top BG: #288282
• Bottom BG: #2F6B6B
• Tab Text: #0D3333
• Inactive Tab BG: #88C2C2

Sky

Changes:

• Top BG: #2679AD
• Bottom BG: #116596
• Tab text: #0B4161
• Inactive tab BG: #73B6E0

[ankurjuneja]

Seattle

Overcast

Harvest

Leaf

Mono

Ocean

Sky

[ankurjuneja]

@labkey-jeckels @labkey-keegang @cnathe I have made changes to the themes suggested in last comment, please let me know what is needed (version bump ?) to merge this branch. Also, please note that the changes are in develop.

[cnathe]

@labkey-jeckels @labkey-keegang @cnathe I have made changes to the themes suggested in last comment, please let me know what is needed (version bump ?) to merge this branch. Also, please note that the changes are in develop.

@ankurjuneja I pulled down the changes > published an alpha package version of the @labkey/themes package > put that into my local platform/core/package.json file > built. The changes look good for the various themes.

Do you have a related fb_issue878_accessibility_issues branch in platform? If so, you can put this 1.8.0-fb-issue878.0 version into the core/package.json file and build to get the changes locally for testing. I think we should end up bumping the @labkey/themes package to 1.9.0 before merging this PR.

[ankurjuneja]

I have a make file from the past to test locally by building ui-components and replacing the distribution. I have bumped up to 1.9.0 and have that version in my platform PR as well, @cnathe do you need to publish 1.9.0 after the merge?

[cnathe]

@ankurjuneja I published the 1.9.0 version of @labkey/themes. I then merged develop into the related platform PR (to resolve the conflict with the core/package.json file) and updated the version of themes there. So you should be all set.