Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-24763

The property action buttons of the class editor are smaller than the minimum target size

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Major
    • None
    • 18.7.0
    • Edit
    • Unknown

    Description

      The class editor and the object editor both put their per-item actions in a row of roughly 16 pixel icons placed immediately next to each other, which is below the minimum target size. Because the icons touch, the spacing exception does not apply either: a 24 pixel circle centred on one of them intersects the circle of its neighbour.

      Class editor

      Every action of a property title is laid out as a 16 by 16 box, and the boxes are floated side by side, in dataeditors.css:

      .xproperty-title .tools .tool {
        width: 16px;
        height: 16px;
        float: left;
      }
      

      This covers the delete button.

      Object editor

      The actions of an object title have no size of their own, so each one is as big as its icon, and they are placed by a hardcoded offset: .xobject-title .delete sits at right: 0 and .xobject-title .edit at right: 16px.

      Measured on a running instance, on a page holding two saved objects, with getBoundingClientRect():

      delete  w=16.0  h=17.7  left=1226.0  right=1242.0  top=261.0
      edit    w=16.0  h=17.7  left=1210.0  right=1226.0  top=261.0
      delete  w=16.0  h=17.7  left=1226.0  right=1242.0  top=281.0
      edit    w=16.0  h=17.7  left=1210.0  right=1226.0  top=281.0
      

      So each target is 16 by 17.7 pixels, the edit and delete targets of one object touch exactly, the right edge of one being the left edge of the other, and the rows of two consecutive objects are only 20 pixels apart. The exception fails on both axes, horizontally between the two actions of an object and vertically between the same action of two consecutive objects.

      Steps to reproduce

      1. Go to a page holding an XClass, for instance XWiki.MyClass, and open the class editor (?editor=class).
      2. Add two or more properties, and measure the action buttons at the right of a property title.
      3. Go to a page holding two or more objects, save it, and open the object editor (?editor=object).
      4. Measure the edit and delete icons at the right of an object title.

      Expected: each action is at least 24 by 24 CSS pixels, or undersized actions are spaced so that the 24 pixel circles centred on them do not intersect.

      Actual: every action is about 16 pixels wide and touches its neighbours.

      ___

      This fails Success Criterion 2.5.8 Target Size (Minimum), level AA

      Attachments

        1. screenshot-1.png
          115 kB
          Charpentier Lucas
        2. screenshot-2.png
          121 kB
          Charpentier Lucas

        Activity

          People

            Unassigned Unassigned
            Lucas C Charpentier Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated: