ICEfaces
  1. ICEfaces
  2. ICE-10737

ace:accordionPane - Should support navigation to accordionPane header via the keyboard

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Minor Minor
          • Resolution: Fixed
          • Affects Version/s: 4.0
          • Fix Version/s: 4.1
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            All
          • Assignee Priority:
            P2

            Description

            Currently, if you click on an ace:accordionPane header with the mouse, it will expand or collapse the accordionPane. However, there is no way to set focus on the header using the keyboard, so you must use the mouse initially to click on the header, and from that point the same header can be toggled via the space-bar.

            Support for navigating to an expandable ace:accordionPane header via the Tab key should be added so the component can be both focussed and toggled purely via the keyboard.

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Arturo Zambrano added a comment -

              There's actually keyboard support on the accordion. It just works differently than in the description. When the accordion receives focus, the focus goes to the whole accordion, not just the active pane. When focused, it is possible to use the arrow keys to highlight different accordion pane headers, even if the panes are collapsed. Once an accordion pane header is highlighted, pressing Enter or Space expands/collapses the pane. The arrow keys used are left or up to go up, and right or down to go down.

              Should we change this behaviour or just document it in the wiki and/or TLD documentation?

              Show
              Arturo Zambrano added a comment - There's actually keyboard support on the accordion. It just works differently than in the description. When the accordion receives focus, the focus goes to the whole accordion, not just the active pane. When focused, it is possible to use the arrow keys to highlight different accordion pane headers, even if the panes are collapsed. Once an accordion pane header is highlighted, pressing Enter or Space expands/collapses the pane. The arrow keys used are left or up to go up, and right or down to go down. Should we change this behaviour or just document it in the wiki and/or TLD documentation?
              Hide
              Permalink
              Arturo Zambrano added a comment -

              I couldn't reproduce the behaviour of focusing the individual headers of the accordion panes. As mentioned before, the accordion receives focus as a whole, and it's possible to use the arrow keys to highlight the panes and press the space/enter keys to expand/collapse them. In fact all the non-active panes have tabindex="-1", so they can't receive focus individually. I tested this on the showcase app with the accordion overview demo on Chrome, IE11, FF, and Safari.

              Show
              Arturo Zambrano added a comment - I couldn't reproduce the behaviour of focusing the individual headers of the accordion panes. As mentioned before, the accordion receives focus as a whole, and it's possible to use the arrow keys to highlight the panes and press the space/enter keys to expand/collapse them. In fact all the non-active panes have tabindex="-1", so they can't receive focus individually. I tested this on the showcase app with the accordion overview demo on Chrome, IE11, FF, and Safari.
              Hide
              Permalink
              Ken Fyten added a comment -

              Okay, I can only reproduce the issue with Tabbing to set focus on different accordion pane headers with Safari, and only when the Advanced Option "Press Tab to highlight each item on the page" is enabled, which is not the default. Without this setting, the Safari behaviour matches the other browsers and there is not issue.

              I think we are fine with the current behaviour marking this Resolved.

              Show
              Ken Fyten added a comment - Okay, I can only reproduce the issue with Tabbing to set focus on different accordion pane headers with Safari, and only when the Advanced Option "Press Tab to highlight each item on the page" is enabled, which is not the default. Without this setting, the Safari behaviour matches the other browsers and there is not issue. I think we are fine with the current behaviour marking this Resolved.
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r45742: documented keyboard support in TLD documentation.

              Also added this documentation to the accordion's wiki page.

              Show
              Arturo Zambrano added a comment - r45742: documented keyboard support in TLD documentation. Also added this documentation to the accordion's wiki page.

                People

                • Assignee:
                  Arturo Zambrano
                  Reporter:
                  Ken Fyten
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: