a0b1ff8293644fb7d8cf5fa860312c29f31c2c67
Merge parents 5709a7858d5 651f959d755
lrnassar
  Tue Mar 17 08:52:21 2026 -0700
Merge branch 'lrnassar-accessibility-form-labels'

diff --cc src/hg/hgGateway/hgGateway.html
index 5231cb6a3bf,335dc42a355..f9c3ebe12fd
--- src/hg/hgGateway/hgGateway.html
+++ src/hg/hgGateway/hgGateway.html
@@@ -1,317 -1,317 +1,317 @@@
      <!-- For determining width of scrollbar (if there is one) -->
      <div id="sbTestContainer">
        <div id="sbTestContainerDPlain"></div>
        <div id="sbTestContainerDScroll" style="overflow: scroll;">
          <div id="sbTestContainerDInsideScroll"></div>
        </div>
      </div>
  
      <div id="pageContent">
  
        <div id="selectSpeciesSection" class="jwColumn" style="width: 450px;">
          <div class="jwSectionTitle">
            Browse/Select Species
          </div>
          <div class="jwSectionContents">
  
            <div id="popSpeciesTitle" class="jwSubsectionTitle">
              Popular Species
            </div>
            <div class="jwSubsectionContents">
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteHuman"></div>
                <div class="jwIconSpriteLabel">Human</div>
              </div>
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteMouse"></div>
                <div class="jwIconSpriteLabel">Mouse</div>
              </div>
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteRat"></div>
                <div class="jwIconSpriteLabel">Rat</div>
              </div>
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteZebrafish"></div>
                <div class="jwIconSpriteLabel">Zebrafish</div>
              </div>
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteFly"></div>
                <div class="jwIconSpriteLabel">Fruitfly</div>
              </div>
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteWorm"></div>
                <div class="jwIconSpriteLabel">Worm</div>
              </div>
              <div class="jwIconWrapper">
                <div class="jwIconSprite jwIconSpriteYeast"></div>
                <div class="jwIconSpriteLabel">Yeast</div>
              </div>
              <br>Search through thousands of genome assemblies
              <span id="speciesSearchInfo">
                <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
                  <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
                  <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/>
                </svg>
              </span>
              <div>
-               <input id="speciesSearch" value="" size=42>
+               <input id="speciesSearch" value="" size=42 aria-label="Search species, common name or assembly ID">
              </div>
              <a href="/assemblySearch.html" id="assemblySearchLink" style="text-decoration: none;">
                  <div style="padding: 0px; display: flex; align-items: center; margin-top: 12px;">
                      <p style="margin: 0; padding-right: 0px; color: blue; text-decoration: underline;"
                         title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI.">Unable to find a genome? Send us a request.</p>
 -                    <img src="/images/magnify.png"
 +                    <img alt="" src="/images/magnify.png"
                           style="height: 16px; width: 16px; margin-top: 0px; margin-left: 5px;"
                           title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI.">
                  </div>
              </a>
            </div>
  
            <!-- Recent Genomes Panel (replaces species tree) -->
            <div id="recentGenomesTitle" class="jwSubsectionTitle" style="display: none;">
              Recent Genomes
              <span id="recentGenomesInfo">
                <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
                  <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
                  <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/>
                </svg>
              </span>
            </div>
            <div id="recentGenomesSection" class="jwSubsectionContents" style="display: none;">
              <div id="recentGenomesPanel" class="recentGenomesPanel">
                <div id="recentGenomesList" class="recentGenomesList">
                  <!-- Recent genomes will be populated by JavaScript -->
                </div>
              </div>
            </div>
  
            <div id="connectedHubsTitle" class="jwSubsectionTitle" style="display: none;">
              Connected Hub Assemblies
              <span id="connectedHubsInfo">
                <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
                  <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
                  <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/>
                </svg>
              </span>
            </div>
            <div id="connectedHubsSection" class="jwSubsectionContents" style="display: none;">
              <div id="connectedHubsPanel" class="recentGenomesPanel">
                <div id="connectedHubsList" class="recentGenomesList">
                  <!-- Connected hubs will be populated by JavaScript -->
                </div>
              </div>
            </div>
  
            <a href="#showSpeciesTree" id="speciesTreeLink">Show species tree</a>
  
            <!-- Species tree underneath the recent genomes section -->
            <div id="representedSpeciesTitle" class="jwSubsectionTitle" style="display: none;">
              Commonly used assemblies
            </div>
            <div id="speciesGraphic" class="jwSubsectionContents" style="display: none;">
              <div id="sliderWidgetContainer" class="jwSliderWidget">
                <div id="sliderSvgContainer" class="jwSliderIcon">
                  <svg id="sliderSvg"
                       xmlns:svg="http://www.w3.org/2000/svg"
                       xmlns="http://www.w3.org/2000/svg"
                       version="1.1"
                       height="53"
                       width="30">
                    <rect id="sliderRectangle"
                          ry="3"
                          y="1.5"
                          x="1.5"
                          height="50"
                          width="24"
                          style="fill: none; stroke: #222222; stroke-width: 3;"></rect>
                    <path id="sliderTriangle"
                          d="m 2.5,24 0,6 4,-3 z"
                          style="fill: #222222; stroke: #222222; stroke-width: 3"></path>
                  </svg>
                </div> <!-- sliderSvgContainer -->
                <div class="jwRainbowSlider" id="rainbowSlider">
                  <!-- JS will populate this -->
                </div>
              </div> <!-- sliderWidgetContainer -->
              <div class="jwSpeciesPicker" id="speciesPicker">
                <div id="speciesTreeContainer" class="jwColumn" style="overflow: visible;">
                  <svg id="speciesTree"
                       xmlns="http://www.w3.org/2000/svg"
                       xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                      <!-- The y coordinates of these will be overwritten by JS. -->
                      <!-- I tried creating them in JS, but then the image style
                           url('#clipWhatever') didn't work. -->
                      <clipPath id="clipHuman">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipMouse">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipFly">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipWorm">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipYeast">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipMonkey">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipHedgehog">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipPig">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipCow">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipOrca">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipHorse">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipDog">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipWalrus">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipBat">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipElephant">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipManatee">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipArmadillo">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipKangaroo">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipBird">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipLizard">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipFrog">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipFish">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                      <clipPath id="clipEbola">
                        <rect x="2" y="0" width="65" height="65"></rect>
                      </clipPath>
                    </defs>
                    <style>
                    text {
                        stroke:none;
                        fill: black;
                        font-size: 12px;
                        text-anchor: end;
                        letter-spacing: 0.025em;
                        cursor: pointer;
                    }
                    text:hover, text.selected {
                        fill: #31469A; /* rainbow dark blue: */
                        font-weight: bold;
                    }
                    text.trackHubsLink {
                        text-anchor: start;
                    }
                    line {
                        stroke: #4b759d;
                        stroke-width: 1;
                    }
                    line:hover {
                        stroke-width: 2;
                    }
                    </style>
  
                    <!-- Tree inserted here by JS -->
  
                  </svg>
                </div> <!-- speciesTreeContainer -->
              </div> <!-- speciesPicker -->
  
            </div> <!-- speciesGraphic -->
  
          </div> <!-- jwSectionContents -->
        </div> <!-- selectSpeciesSection -->
  
        <div id="findPositionSection" class ="jwColumn">
          <div id="findPositionTitle" class="jwSectionTitle">
            Find Position
          </div>
          <div id="findPositionContents" class="jwSectionContents"
               style="display: none;"> <!-- To avoid empty containers jumping around, hide first. -->
  
            <div id="findPosInputContainer" style="display: inline-block;">
-             <div id="selectAssemblyLabel" class="jwInputLabel">Assembly</div>
+             <label for="selectAssembly" id="selectAssemblyLabel" class="jwInputLabel">Assembly</label>
              <select id="selectAssembly">
              </select>
  
              <div class="vertSpacerAbovePosition"></div>
  
-             <div class="jwInputLabel">
+             <label for="positionInput" class="jwInputLabel">
                Position/Search Term
                <span style="font-size: smaller">
                  (<a href="../../goldenPath/help/query.html">Examples</a>)
                </span>
-             </div>
+             </label>
              <input id="positionInput" value="" size="40">
              <div class="jwCurrentPos">
                Current position:
                <span id="positionDisplay" class="jwPosDisplay"></span>
                <i id="copyPosition" class="fa fa-copy jwTextBlue"
                   title="Copy the current position into the input above"></i>
              </div>
            </div>
  
            <div class="jwGoButtonContainer"
                 title="Go to the Genome Browser">
              <div class="jwGoButton">
                GO
              </div>
              <i class="jwGoIcon fa fa-play fa-2x"></i>
            </div>
  
            <div id="surveyContainer" class="jwSurveyContainer"></div>
  
            <div class="vertSpacerBelowPosition jwClearBoth"></div>
  
            <div id="descriptionTitle" class="jwDescriptionTitle">
              <div class="jwFloatLeft">
                <b><span id="descriptionGenome"></span> Genome Browser</b> -
                <span id="descriptionDb"></span> assembly
              </div>
              <div class="jwFloatRight" style="margin-left: 5px;">
                <a id="chromInfoLink" class="jwAnchor" href="hgTracks?chromInfoPage=&hgsid=$hgsid">
                  <div class="jwWhiteButton">
                    View sequences
                  </div>
                </a>
              </div>
              <div class="jwClearBoth"></div>
            </div>
            <div id="descriptionText" class="jwDescriptionText">
            </div>
  
          </div>
        </div>
  
      </div>
  
      <div style="clear: both;"></div>