ICEfaces
  1. ICEfaces
  2. ICE-10223

ace:dataTable - Add a 'caption' attribute

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P02, 4.0
    • Fix Version/s: EE-4.0.0.GA, EE-3.3.0.GA_P03, 4.1
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      all

      Description

      Feature Request: Add a 'caption' attribute to help facilitate better screen reader/accessibility for the ace:dataTable.

      http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/H39

        Activity

        Arran Mccullough created issue -
        Hide
        Ken Fyten added a comment -

        This looks simple enough, but need to review the use of "caption" in the context of our support for WAI-ARIA roles to ensure no conflict is created by adding it, etc.

        Show
        Ken Fyten added a comment - This looks simple enough, but need to review the use of "caption" in the context of our support for WAI-ARIA roles to ensure no conflict is created by adding it, etc.
        Ken Fyten made changes -
        Field Original Value New Value
        Assignee Arturo Zambrano [ artzambrano ]
        Fix Version/s EE-4.0.0.GA [ 11171 ]
        Fix Version/s EE-3.3.0.GA_P03 [ 11572 ]
        Priority Major [ 3 ] Minor [ 4 ]
        Hide
        Arturo Zambrano added a comment -

        I did some investigation and attempted to add this feature.

        The good news is that there are no conflicts with the roles we currently use. According to the W3C specifications the caption element can be used with any other ARIA attributes. The only case where it shouldn't be used is when a table is used for layout purposes and not to display data; that is when it has the 'presentation' role. The following pages are used for reference:

        http://www.w3.org/TR/2013/WD-aria-in-html-20130214/
        http://www.w3.org/TR/wai-aria/roles

        The only issue is when we have scrolling and staticHeader enabled, since in this case we render two <table> elements: one for the headers and one for the data. So, the <caption> element would naturally go in the table that actually displays the data. The problem is that, because this caption text is rendered on top of the table, this breaks the flow with the header table, and the table as a whole doesn't look as good. We might say that we could simply render the <caption> element in the header table, so that the caption appears an top of the whole ACE data table, as we know it. However, this could be misleading for people who actually need this feature, as the header table contains no data. So, we might simply go ahead and implement this feature, even if it doesn't look as good on tables with scrolling and staticHeaders enabled, or we could simply not supported in such case.

        Show
        Arturo Zambrano added a comment - I did some investigation and attempted to add this feature. The good news is that there are no conflicts with the roles we currently use. According to the W3C specifications the caption element can be used with any other ARIA attributes. The only case where it shouldn't be used is when a table is used for layout purposes and not to display data; that is when it has the 'presentation' role. The following pages are used for reference: http://www.w3.org/TR/2013/WD-aria-in-html-20130214/ http://www.w3.org/TR/wai-aria/roles The only issue is when we have scrolling and staticHeader enabled, since in this case we render two <table> elements: one for the headers and one for the data. So, the <caption> element would naturally go in the table that actually displays the data. The problem is that, because this caption text is rendered on top of the table, this breaks the flow with the header table, and the table as a whole doesn't look as good. We might say that we could simply render the <caption> element in the header table, so that the caption appears an top of the whole ACE data table, as we know it. However, this could be misleading for people who actually need this feature, as the header table contains no data. So, we might simply go ahead and implement this feature, even if it doesn't look as good on tables with scrolling and staticHeaders enabled, or we could simply not supported in such case.
        Arturo Zambrano made changes -
        Attachment screenshot-10223-1.png [ 17688 ]
        Hide
        Arturo Zambrano added a comment -

        Attached screenshot of how the caption looks on a table with scrolling=true and staticHeaders="true.

        Fortunately, if the text is too long, it wraps around, without appearing outside the table.

        It's also very easy to style it using normal CSS. In the screenshot the text colour was changed to red, Hiding the text from view is just a matter of adding display:none;.

        Show
        Arturo Zambrano added a comment - Attached screenshot of how the caption looks on a table with scrolling=true and staticHeaders="true. Fortunately, if the text is too long, it wraps around, without appearing outside the table. It's also very easy to style it using normal CSS. In the screenshot the text colour was changed to red, Hiding the text from view is just a matter of adding display:none;.
        Hide
        Ken Fyten added a comment -

        Okay, I'd say go ahead and commit this and document the styling strategy in the wiki page for the attribute.

        Show
        Ken Fyten added a comment - Okay, I'd say go ahead and commit this and document the styling strategy in the wiki page for the attribute.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43629 Mon Dec 01 15:35:52 MST 2014 art.zambrano ICE-10223 added 'caption' attribute to ace:dataTable
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableMeta.java
        Hide
        Arturo Zambrano added a comment -

        Committed improvement to 3.3 EE maintenance branch at revision 43628 and to 4.0 trunk at revision 43629.

        Show
        Arturo Zambrano added a comment - Committed improvement to 3.3 EE maintenance branch at revision 43628 and to 4.0 trunk at revision 43629.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Carmen Cristurean added a comment -

        Added caption attribute test to QA ace:dataTable test apps: /captionAttributeTest.jsf
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable (IF4 trunk regressions)
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces2/Sparkle/Nightly/dataTable (EE-3.3-maintenance branch regressions)

        Verified with IF4 trunk / EE-3.3-maintenance r43636 in IE10, Chrome39, FF34 by running all showcase > ace:dataTable, and the QA dataTable test app regression tests.

        Show
        Carmen Cristurean added a comment - Added caption attribute test to QA ace:dataTable test apps: /captionAttributeTest.jsf http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable (IF4 trunk regressions) http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces2/Sparkle/Nightly/dataTable (EE-3.3-maintenance branch regressions) Verified with IF4 trunk / EE-3.3-maintenance r43636 in IE10, Chrome39, FF34 by running all showcase > ace:dataTable, and the QA dataTable test app regression tests.
        Ken Fyten made changes -
        Affects Documentation (User Guide, Ref. Guide, etc.) [ 10003 ]
        Ken Fyten made changes -
        Fix Version/s 4.1 [ 11375 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: