Details

      Description

      There are some issues in forms related to accessibility:

      1. There are wrong translations into Spanish;
      2. Labels and inputs are not related;
      3. Contrast color is insufficient in paragraph field;
      4. Asterisk for required fields is not accessible;
      5. Single Selection, Multiple Selection and Grid fields should be using legend instead of label.

      Steps to reproduce

      1. Start Liferay and change language to Spanish;
      2. Create a new Form adding a field of type paragraph (Check expected behavior 1);
      3. Also add a field of type Text and make it required;
      4. Add these fields as well: Single Selection, Multiple Selection and Grid;
      5. Add the form to a new page;
      6. Inspect the DOM (Check expected behavior 2);
      7. Check the color contrast of paragraph's field body text with AXE (Chrome extension) or in https://contrastchecker.com/ (Check expected behavior 3);
      8. Check the asterisk for text field (Check expected behavior 4);
      9. Check if the labels on the Single Selection, Multiple Selection and Grid fields use label elements (Check expected behavior 5).

      Expected behavior 1
      Translation for 'Body text' is 'Cuerpo del texto'

      Actual behavior 1
      Translation for 'Body text' is 'Cuero del texto'

      Expected behavior 2
      Labels are related to the inputs they are labelling

      Actual behavior 2
      There is no relation between labels and inputs.

      Expected behavior 3
      There is enough color constrast between the color of the text and the background

      Actual behavior 3
      There is not enough color contrast.

      Expected behavior 4
      There should be some information, specially thinking about screen readers, saying that field is required

      Actual behavior 4
      There is no information about that field being required.

      Expected behavior 5
      Fields that use radio buttons and checkboxes should be using the legend element.

      Actual behavior 5
      Fields that use radio buttons and checkboxes are using the label element.

      Edit 1: behavior 3 was handled by LPS-119223 and behavior 2 and 4 were handled by LPS-118306.
      Edit 2: behavior 5 was added because it got fixed in the pull request but wasn't documented here.

        Attachments

        1. fixed1.png
          fixed1.png
          16 kB
        2. fixed5.png
          fixed5.png
          50 kB
        3. Screenshot.png
          Screenshot.png
          87 kB

          Issue Links

            Activity

              People

              Assignee:
              hong.zhao Hong Zhao (Inactive)
              Reporter:
              antonio.ortega Antonio Ortega
              Participants of an Issue:
              Recent user:
              Yunlin "Steven" Sun
              Engineering Assignee:
              Antonio Ortega
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Days since last comment:
                44 weeks, 6 days ago

                  Packages

                  Version Package
                  7.2.10 DXP FP10
                  7.2.10.4 DXP SP4
                  7.2.X
                  7.3.5 CE GA6
                  7.3.10 DXP GA1
                  7.3.10 DXP FP1
                  7.3.10.1 DXP SP1
                  7.3.6 CE GA7
                  7.3.X
                  Master