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

Header - Search panel: Content fails to reflow

XMLWordPrintable

      Issue Summary

      In the “Header” section, content fails to reflow when viewed at 320*256 viewport.

      Steps to Reproduce

      1. Navigate to the "Header" section.
      2. Navigate to the "Search Input field" and activate it.
      3. Press the Command + Control + R key in Safari that will set the screen size to 320 X 256px and observe that the page fails to be reflowed.

      Screenshot

      Actual Results

      When users access the page at 320*256 viewport, the content present inside the search popup gets cutoff.
      This will result in low-vision users finding it difficult to access the content when zoomed in.

      Expected Results

      The content of the page should be appropriately visible and not get cut off, the cut-off content visibility will result in interactive elements and important functionality getting missed by low-vision users. Use relative units to define font and container sizes in CSS to ensure that the page's content reflows correctly when zoomed in. In addition, use CSS media queries to display web page content correctly when zoomed in or viewed using different devices.  Content at high zoom levels should be reflowed and should be displayed in a single column.

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Environment 

      MacBook Pro (16-inch, 2019)
      macOs Sonoma 14.1.1
      Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2022
      NVDA- Version 2021.2
      Voiceover - Version Latest

        1. Screenshot 2023-11-24 at 3.53.46 PM.png
          Screenshot 2023-11-24 at 3.53.46 PM.png
          299 kB

            [CONFSERVER-93339] Header - Search panel: Content fails to reflow

            Richard Atkins made changes -
            Labels Original: 1.4.10 Level-AA WCAG21 a11y-277 ax-A11y-251 ax-bug ax-confluence-dc-vpat ax-confluence-dc-vpat-header ax-confluence-dc-vpat-pg14 ax-critical-priority ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-itzbund ax-lv-user ax-qa New: 1.4.10 Level-AA WCAG21 a11y-277 ax-A11y-251 ax-bug ax-confluence-dc-2023-vpat ax-confluence-dc-vpat ax-confluence-dc-vpat-header ax-confluence-dc-vpat-pg14 ax-critical-priority ax-customer-escalated ax-esc-arbeitsagentur.de ax-esc-itzbund ax-lv-user ax-qa
            Zac Xu made changes -
            Link New: This issue causes CONFSRVDEV-31926 [ CONFSRVDEV-31926 ]
            Aakash Jain made changes -
            Resolution New: Fixed [ 1 ]
            Status Original: Waiting for Release [ 12075 ] New: Closed [ 6 ]
            Zac Xu made changes -
            Remote Link New: This issue links to "Confluence Bundled Plugins › Confluence Ancillary Plugins › issue-CONFSERVER-93339-search-ui-reflow (server-syd-bamboo)" [ 846859 ]
            Zac Xu made changes -
            Remote Link New: This issue links to "Page (Confluence)" [ 846009 ]
            Zac Xu made changes -
            Status Original: Awaiting Merge [ 10064 ] New: Waiting for Release [ 12075 ]
            Zac Xu made changes -
            QA Demo Status Original: Not Done [ 14330 ] New: Done [ 14331 ]
            Status Original: In Review [ 10051 ] New: Awaiting Merge [ 10064 ]
            Zac Xu made changes -
            Epic Link New: CONFSRVDEV-29113 [ 1988816 ]
            Zac Xu made changes -
            Summary Original: Header - Search UI: Content fails to reflow New: Header - Search panel: Content fails to reflow
            Zac Xu made changes -
            Summary Original: Header: Content fails to reflow New: Header - Search UI: Content fails to reflow

              zxu2@atlassian.com Zac Xu
              83061a15f038 Nayan Kamble
              Affected customers:
              0 This affects my team
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved: