Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-78686

Accessibility - Insufficient color contrast on some collaboration portlets fail accessibility check as Guest User

    Details

      Description

      Steps to reproduce:

      1. Add a new page
      2. Add one of each of the following portlets to the new page
        • Blogs
        • Blogs Aggregator
        • Wiki
        • Wiki Display
        • Message Boards
        • Knowledge Base Display
        • Knowledge Base Article
        • Knowledge Base Section
        • Microblogs
        • Microblogs Status Update
        • Bookmarks
        • Friends Directory
        • Page Comments
        • Activities
        • Group Statistics
        • Twitter
      3. Log out
      4. Add aXe 3.2.3 "Accessibility testing in Chrome Developer Tools" to the Chrome browser
      5. Run the Accessibility check on the page

      Expected result:
      Accessibility check will not find any violations.

      Actual result:
      The check finds the following issues (on master):

       [exec]     1) Elements must have sufficient color contrast: https://dequeuniversity.com/rules/axe/1.1/color-contrast
           [exec]       a) ["#portlet_com_liferay_twitter_web_portlet_TwitterPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.36 (foreground color: #1865fb, background color: #eef2fa, font size: 9.8pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       b) ["#portlet_com_liferay_social_group_statistics_web_portlet_SocialGroupStatisticsPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.36 (foreground color: #1865fb, background color: #eef2fa, font size: 9.8pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       c) ["#_com_liferay_comment_page_comments_web_portlet_PageCommentsPortlet_zbwa_postReplyButton0 > .lfr-btn-label"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.45 (foreground color: #ffffff, background color: #c3d7fe, font size: 10.5pt, font weight: bold)
           [exec] 
           [exec] 
           [exec]       d) ["#_com_liferay_directory_web_portlet_FriendsDirectoryPortlet_ocerSearchContainerEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.32 (foreground color: #a7a9bc, background color: #ffffff, font size: 10.5pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       e) ["#_com_liferay_bookmarks_web_portlet_BookmarksPortlet_entriesEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.32 (foreground color: #a7a9bc, background color: #ffffff, font size: 10.5pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       f) ["#portlet_com_liferay_knowledge_base_web_portlet_ArticlePortlet_INSTANCE_rhVBq31ERSKD > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.36 (foreground color: #1865fb, background color: #eef2fa, font size: 9.8pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       g) ["#portlet_com_liferay_knowledge_base_web_portlet_DisplayPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.36 (foreground color: #1865fb, background color: #eef2fa, font size: 9.8pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       h) ["#_com_liferay_message_boards_web_portlet_MBPortlet_mbEntriesEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.32 (foreground color: #a7a9bc, background color: #ffffff, font size: 10.5pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       i) ["#portlet_com_liferay_wiki_web_portlet_WikiDisplayPortlet_INSTANCE_A2f3jGtuX8EP > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.36 (foreground color: #1865fb, background color: #eef2fa, font size: 9.8pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       j) ["#portlet_com_liferay_wiki_web_portlet_WikiPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > div > .sidenav-content > div > div > .main-content-body > .wiki-body > .alert.alert-info > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.36 (foreground color: #1865fb, background color: #eef2fa, font size: 9.8pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       k) ["#_com_liferay_document_library_web_portlet_IGDisplayPortlet_INSTANCE_N9mbNw3l26cm_objectsSearchContainerEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.32 (foreground color: #a7a9bc, background color: #ffffff, font size: 10.5pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       l) ["#_com_liferay_document_library_web_portlet_DLPortlet_INSTANCE_l6hca510qxxC_entriesEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.32 (foreground color: #a7a9bc, background color: #ffffff, font size: 10.5pt, font weight: normal)
           [exec] 
           [exec] 
           [exec]       m) ["#portlet_com_liferay_blogs_web_portlet_BlogsPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.32 (foreground color: #a7a9bc, background color: #ffffff, font size: 10.5pt, font weight: normal)
      

      And the following issues (on 7.0.x/DXP):

        [exec]     1) Elements must have sufficient color contrast: https://dequeuniversity.com/rules/axe/1.1/color-contrast
           [exec]       a) ["#_com_liferay_product_navigation_user_personal_bar_web_portlet_ProductNavigationUserPersonalBarPortlet_sidenavUserToggle > .user-avatar-image > .user-icon-color-5.user-icon.user-icon-default > span"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 3.35 (foreground color: #ffffff, background color: #be67e5, font size: 12.0pt, font weight: normal)
           [exec]
           [exec]
           [exec]       b) ["#portlet_com_liferay_twitter_web_portlet_TwitterPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.26 (foreground color: #6a708b, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       c) ["#portlet_com_liferay_social_group_statistics_web_portlet_SocialGroupStatisticsPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.26 (foreground color: #6a708b, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       d) ["#portlet_com_liferay_social_activities_web_portlet_SocialActivitiesPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .taglib-social-activities > .list-group-card.list-unstyled > .list-group-item > .card.card-horizontal > .card-row.card-row-padded > .card-col-field > .user-icon-color-5.user-icon.user-icon-default > span"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 3.35 (foreground color: #ffffff, background color: #be67e5, font size: 12.0pt, font weight: normal)
           [exec]
           [exec]
           [exec]       e) ["#iujq_messageScroll0 > div > .panel > .panel-body > .lfr-discussion-details > .user-icon-color-5.user-icon-lg.user-icon.user-icon-default > span"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 3.35 (foreground color: #ffffff, background color: #be67e5, font size: 15.0pt, font weight: normal)
           [exec]
           [exec]
           [exec]       f) ["#_com_liferay_comment_page_comments_web_portlet_PageCommentsPortlet_iujq_postReplyButton0 > .lfr-btn-label"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.65 (foreground color: #ffffff, background color: #a2d2d5, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       g) ["#_com_liferay_directory_web_portlet_FriendsDirectoryPortlet_ocerSearchContainerEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #b3c2cc, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       h) ["#_com_liferay_bookmarks_web_portlet_BookmarksPortlet_entriesEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #b3c2cc, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       i) ["#portlet_com_liferay_microblogs_web_portlet_MicroblogsStatusUpdatePortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .microblogs-container.microblogs-status-container > .alert.alert-info"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #86bada, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       j) ["#_com_liferay_microblogs_web_portlet_MicroblogsPortlet_tabs1116105109101108105110101TabsId > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.91 (foreground color: #44a5aa, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       k) ["#portlet_com_liferay_microblogs_web_portlet_MicroblogsPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .microblogs-container > .alert.alert-info"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #86bada, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       l) ["#portlet_com_liferay_knowledge_base_web_portlet_SectionPortlet_INSTANCE_sDoAoNVgZNJz > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #86bada, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       m) ["#portlet_com_liferay_knowledge_base_web_portlet_ArticlePortlet_INSTANCE_4tw2xZ1uhADm > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.26 (foreground color: #6a708b, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       n) ["#portlet_com_liferay_knowledge_base_web_portlet_DisplayPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.26 (foreground color: #6a708b, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       o) ["#_com_liferay_message_boards_web_portlet_MBPortlet_mbEntriesEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #b3c2cc, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       p) ["#portlet_com_liferay_wiki_web_portlet_WikiDisplayPortlet_INSTANCE_66qLw8EDucLS > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .alert.alert-info.portlet-configuration > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.26 (foreground color: #6a708b, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       q) ["#portlet_com_liferay_wiki_web_portlet_WikiPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > div > .sidenav-content > div > div > .main-content-body > .wiki-body > .alert.alert-info > a"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 4.26 (foreground color: #6a708b, background color: #e7f1f9, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       r) ["#_com_liferay_document_library_web_portlet_IGDisplayPortlet_INSTANCE_gJhkZKGe52up_objectsSearchContainerEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #b3c2cc, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       s) ["#_com_liferay_document_library_web_portlet_DLPortlet_INSTANCE_lKWYSMdJ2Xhu_entriesEmptyResultsMessage > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #b3c2cc, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       t) ["#portlet_com_liferay_blogs_web_portlet_BlogsPortlet > .portlet-content.portlet-content-editable > .portlet-content-container > .portlet-body > .card.main-content-card.taglib-empty-result-message > .card-row.card-row-padded > .text-center.text-muted"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 1.83 (foreground color: #b3c2cc, background color: #ffffff, font size: 13.5pt, font weight: normal)
           [exec]
           [exec]
           [exec]       u) ["#_com_liferay_product_navigation_control_menu_web_portlet_ProductNavigationControlMenuPortlet_addPanelId > .product-menu.sidebar.sidebar-inverse.sidenav-menu > .sidebar-header > span"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 2.91 (foreground color: #ffffff, background color: #44a5aa, font size: 15.0pt, font weight: normal)
           [exec]
           [exec]
           [exec]       v) ["#_com_liferay_product_navigation_control_menu_web_portlet_ProductNavigationControlMenuPortlet_searchApplication"]
           [exec]         Fix any of the following:
           [exec]           Element has insufficient color contrast of 3.77 (foreground color: #6a708b, background color: #dae3ef, font size: 13.5pt, font weight: normal)
      

        Attachments

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Days since last comment:
                42 weeks, 6 days ago

                Packages

                Version Package