Skip to content
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

SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning #1579

Merged
merged 6 commits into from
Jul 26, 2024
Merged

SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning #1579

merged 6 commits into from
Jul 26, 2024

Conversation

codechefmarc
Copy link
Collaborator

@codechefmarc codechefmarc commented Jul 16, 2024 •
edited by ahughes3
Loading

READY FOR REVIEW

Summary

  • When adding a table to a WYSIWYG field with CKeditor, table headings are now added by default.
  • This can be turned off using the table function built into CKEditor, if needed.
  • Prevents accessibility tools from flagging poor accessibility due to no table header.

Need Review By (Date)

7/22/2024

Urgency

low

Steps to Test

  1. Login to the site and add a flexible page
  2. In the Text Area field, add a table using the table tools
Screenshot 2024-07-16 at 5 02 19 PM
  1. When the table is created, verify that there is a header row, marked with a dark red background.
Screenshot 2024-07-16 at 5 02 32 PM
  1. Enter some data into the table, and save the flexible page.
  2. On the front-end, verify that the table header is styled appropriately.
Screenshot 2024-07-16 at 5 04 39 PM

@cienvaras - The table is styled correctly when saved on the front-end. However, on the back-end when editing the table, the header text color is too dark against the dark red background so it is hard to see:

Screenshot 2024-07-16 at 4 21 15 PM

I know you mentioned to me where the CSS is handled but I've forgotten. I'm happy to fix this if you'd like or if you or Mari could take it on and let me know where the change goes? I would like to know for future tickets. Thank you!

PR Checklist

@codechefmarc codechefmarc requested a review from cienvaras July 17, 2024 00:11
@codechefmarc codechefmarc self-assigned this Jul 17, 2024
@codechefmarc codechefmarc marked this pull request as ready for review July 17, 2024 00:11
@cienvaras cienvaras changed the base branch from develop to fk-stnfd-sprint-55 July 24, 2024 23:38
@cienvaras
Copy link
Collaborator

@codechefmarc For updating the wysiwyg styles, check docroot/themes/humsci/humsci_basic/src/scss/ckeditor/imports.scss. This is the entry point for the WYSIWYG styles. Probably the white color is being overridden with a gin definition with a higher specificity, so just need to override it again manually in this file.

After making the change, you can build the assets running npm run theme-build or start watch mode with npm run theme-watch in the project's root.

Leave me a comment here if you have any issue or if you run out of time, so I can do the fix after the holiday. Also, please notice that I updated the branch and changed the base, so you'll probably need to re-import config or re-install.

@codechefmarc
Copy link
Collaborator Author

@cienvaras - Thank you! I added the CSS for that for CKEditor and that works. This is ready for review.

cienvaras
cienvaras approved these changes Jul 26, 2024
View reviewed changes
Copy link
Collaborator

@cienvaras cienvaras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codechefmarc Thanks for adding the CSS, works great! I just did a quick change to use the FE theme variable (--palette--white) instead of the gin variable, to prevent any future issues in case of a change in the value.

@cienvaras cienvaras merged commit b8d1202 into fk-stnfd-sprint-55 Jul 26, 2024
3 of 4 checks passed
@cienvaras cienvaras deleted the SHS-5675--table-headings branch July 26, 2024 15:16
joegl pushed a commit that referenced this pull request Jul 29, 2024
@cienvaras
Four Kitchens Release - Sprint 55 (#1584)
0462081 
* SHS-5661: Remove legacy fields (#1577)
* feat(SHS-5661): Remove paragraph field Overlay Color on banner image with text box
* feat(SHS-5661): Remove other references to the overlay field
* feat(SHS-5661): Add update hook to remove legacy field
* fix(SHS-5661): Fix linting error
* fix(shs-5661): remove hero-text-overlay variants and update viewmode config
* SHS-4929: Hide caption/credits on images in default views (#1578)
* feat(shs-4929): add new media view mode and update news default views
* feat(shs-4929):  update people default views
* feat(shs-4929):  update publications default views
* SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning (#1579)
* feat(SHS-5675): Add default table header rows to new tables in CKEditor
* fix(SHS-5675): Fix linting error
* docs(SHS-5675): Add comments describing change and source of change.
* feat(SHS-5675): Update table heading color in CKEditor
* fix(shs-5675): change color variable for table headings
* fix(shs-5696): make normal the font style of blockquotes in wysiwyg (#1582)
* SHS-5693: Implementation: New Vertical Card option (#1581)
* feat(shs-5693): add view mode and and pattern for vertical button card
* feat(shs-5693): configure the Style field to use the new view mode with the right label.
* feat(shs-5693): add pattern into module preprocess function and update twig file
* feat(shs-5693): more implementations in vertical button card
* feat(shs-5693): implementations in vertical button card for colorful
* feat(shs-5693): update box shadow
* feat(shs-5693): update image position for colorful
* feat(shs-5953): use secondary button styles in traditional and fix space in colorful when there's no image
* fix(shs-5693): fix incorrect background color
cienvaras added a commit that referenced this pull request Aug 9, 2024
@codechefmarc @cienvaras @mariannuar
SHS-5629: Editors can more easily edit a caption (#1580)
ee7cd0b 
* feat(SHS-5629): Add patch to allow editing of media items in a modal from a node edit page

* fix(SHS-5629): Remove todo in patch file

* SHS-5661: Remove legacy fields (#1577)

* feat(SHS-5661): Remove paragraph field Overlay Color on banner image with text box

* feat(SHS-5661): Remove other references to the overlay field

* feat(SHS-5661): Add update hook to remove legacy field

* fix(SHS-5661): Fix linting error

* fix(shs-5661): remove hero-text-overlay variants and update viewmode config

---------

Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* SHS-4929: Hide caption/credits on images in default views (#1578)

* feat(shs-4929): add new media view mode and update news default views

* feat(shs-4929):  update people default views

* feat(shs-4929):  update publications default views

---------

Co-authored-by: Mari Nez <mariannuar@gmail.com>
Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* refactor(SHS-5629): Switch local patch for remote patch, add patch to fix missing save button on media modal

* SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning (#1579)

* feat(SHS-5675): Add default table header rows to new tables in CKEditor

* fix(SHS-5675): Fix linting error

* docs(SHS-5675): Add comments describing change and source of change.

* feat(SHS-5675): Update table heading color in CKEditor

* fix(shs-5675): change color variable for table headings

---------

Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* fix(shs-5629): revert composer.lock changes

* fix(SHS-5629): Possible fix for dialog box too low on screen

* fix(SHS-5629): Fix dialog too low on screen issue (clear browser cache to fix)

* fix(shs-5629): remove unnecesary change

* fix(shs-5629): update patch

---------

Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>
Co-authored-by: Mariana Núñez <48533432+mariannuar@users.noreply.github.com>
Co-authored-by: Mari Nez <mariannuar@gmail.com>
joegl pushed a commit that referenced this pull request Aug 13, 2024
@cienvaras
Four Kitchens Release - Sprint 56 (#1597)
29f076f 
* SHS-5692: Implementation: New Spotlight design for Colorful and Traditional (#1589)
* SHS-5772: Regression: External Links on Postcards are wrong color (#1591)
* SHS-5629: Editors can more easily edit a caption (#1580)
* SHS-5661: Remove legacy fields (#1577)
* SHS-4929: Hide caption/credits on images in default views (#1578)
* SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning (#1579)
cienvaras added a commit that referenced this pull request Aug 22, 2024
@mariannuar @cienvaras @codechefmarc
SHS-5691: New color palette for Traditional (#1600)
fb74037 
* SHS-5692: Implementation: New Spotlight design for Colorful and Traditional (#1589)

* feat(shs-5692): add new field for variantion style and start implementing new styles

* feat(shs-5692): styles for colorful

* feat(shs-5692): finish styles for colorful

* feat(shs-5692): finish styles for colorful

* feat(shs-5692): finish styles for traditional

* feat(shs-5692): finish styles for traditional

* fix(shs-5692): fix on colorful

* fix(shs-5692): image dimensions and height when spotlits are in sliders

* fix(shs-5692): refactor spotlight style field class assignation

---------

Co-authored-by: Mari Nez <mariannuar@gmail.com>
Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* SHS-5772 - Regression: External Links on Postcards are wrong color (#1591)

* fix(shs-5772): regression in external links in postcards

* fix(shs-5772): update card title link styles

---------

Co-authored-by: Mari Nez <mariannuar@gmail.com>
Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* SHS-5629: Editors can more easily edit a caption (#1580)

* feat(SHS-5629): Add patch to allow editing of media items in a modal from a node edit page

* fix(SHS-5629): Remove todo in patch file

* SHS-5661: Remove legacy fields (#1577)

* feat(SHS-5661): Remove paragraph field Overlay Color on banner image with text box

* feat(SHS-5661): Remove other references to the overlay field

* feat(SHS-5661): Add update hook to remove legacy field

* fix(SHS-5661): Fix linting error

* fix(shs-5661): remove hero-text-overlay variants and update viewmode config

---------

Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* SHS-4929: Hide caption/credits on images in default views (#1578)

* feat(shs-4929): add new media view mode and update news default views

* feat(shs-4929):  update people default views

* feat(shs-4929):  update publications default views

---------

Co-authored-by: Mari Nez <mariannuar@gmail.com>
Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* refactor(SHS-5629): Switch local patch for remote patch, add patch to fix missing save button on media modal

* SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning (#1579)

* feat(SHS-5675): Add default table header rows to new tables in CKEditor

* fix(SHS-5675): Fix linting error

* docs(SHS-5675): Add comments describing change and source of change.

* feat(SHS-5675): Update table heading color in CKEditor

* fix(shs-5675): change color variable for table headings

---------

Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>

* fix(shs-5629): revert composer.lock changes

* fix(SHS-5629): Possible fix for dialog box too low on screen

* fix(SHS-5629): Fix dialog too low on screen issue (clear browser cache to fix)

* fix(shs-5629): remove unnecesary change

* fix(shs-5629): update patch

---------

Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>
Co-authored-by: Mariana Núñez <48533432+mariannuar@users.noreply.github.com>
Co-authored-by: Mari Nez <mariannuar@gmail.com>

* feat(shs-5691): add new color pallete-for-traditional

* feat(shs-5691): add new color palette-for-traditional

* fix(shs-5691): update secondary and secondary active colors

---------

Co-authored-by: Mari Nez <mariannuar@gmail.com>
Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com>
Co-authored-by: Marc Berger <107938318+codechefmarc@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cienvaras cienvaras cienvaras approved these changes

Assignees

@codechefmarc codechefmarc

Labels
Needs review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@codechefmarc @cienvaras