Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-78108

Toolbar : Insert table action cannot be performed by keyboard alone

    XMLWordPrintable

Details

    Description

      Steps to Reproduce

      1. Navigate and activate "Edit"
      2. Navigate and activate "insert table" available in toolbar
      3. Observe a table grid gets available and using mouse grid size of the table can be adjusted, the same cannot be possible using keyboard.

      Actual Behaviour

      When user attempt to add table using keyboard, even though "insert table" button receives focus the mechanism provided to select grid size of the table is not accessible for keyboard only user due to which keyboard only user would not be able to access functionality associated with them.

      Currently the mechanism to select rows & columns is only available through mouse. Alternatively there are keyboard shortcuts provided to add the table in the editor.

      Keyboard shortcuts:

      Expected Result

      Implementation of one of the following approaches should be able to fix this issue.

      1. The insert table function should work with keyboard arrow keys that once you expand this view then the keyboard user can simply press right arrow and down arrow keys to expand the size of their table grid.

      Screen reader user would hear the table size as they modify it with their arrow keys "2 x 3" spoken via ARIA live region.

      This can be achieved by using ARIA role="grid" & roving tabindex mechanisms. Also the tooltip text "Hold SHIFT for a table without a heading." should be made available for screen reader & keyboard users.

      Provide an instruction for the users on how to use the table macro.
      For Example : "Use up/down arrow keys for rows & left/right arrow keys for columns and press enter to insert the table".

      2. Similar to Confluence cloud in confluence DC when user activates the "Insert table" button a table with 3 rows & 3 columns should get created in the editor. The existing mechanism of grid should be hidden from assistive technology users as we are providing an alternate way for the same.

      Refer to following recording of confluence cloud implementation of "Insert table" feature.

      Screen Recording 2022-07-12 at 8.30.19 PM.mov

      Along with this there should be an instruction present on the page which conveys this interaction. For Example : "A 3X3 table will be added".

      3. In the "Insert table" popup after the grid mechanics, provide an input text fields so that user can enter the number of rows & columns for the table along with a radio input for the table heading option and a submit button.

      For Example : 

      Screenshot

      Screen Recording

      table.mov

      Bug Ref: 731833

      Attachments

        Activity

          People

            607d03f48037 Kostiantyn Smolenskyi (Inactive)
            12b69dcabe29 Matthew Brennan
            Votes:
            1 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: