Fixing some more misc. accessibility issues

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.40.0",
+  "version": "7.40.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,13 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.40.1
+*Released*: 2 June 2026
+- More misc. accessibility improvements
+  - Fix empty buttons for `ExpandableContainer` and `RemoveEntityButton`
+  - Fix color contrast for `.name-id-setting__prefix-example`, `.container-nav` and `.lk-version-nav`
+  - Fix color contrast for `.sr-only` to avoid false positives from WAVE
+
 ### version 7.40.0
 *Released*: 28 May 2026
 - Calculated Column Assistant

packages/components/src/internal/components/ExpandableContainer.tsx

@@ -108,7 +108,9 @@ export const ExpandableContainer: FC<Props> = memo(props => {
                         })}
                         onClick={hasOnClick || isExpandable ? handleClick : undefined}
                         type="button"
-                    />
+                    >
+                        <span className="sr-only">{visible ? 'Collapse' : 'Expand'}</span>
+                    </button>
                 </div>
                 <div className="container-expandable-heading">
                     {clause}

packages/components/src/internal/components/__snapshots__/ExpandableContainer.test.tsx.snap

@@ -22,7 +22,13 @@ exports[`<ExpandableContainer/> custom props 1`] = `
         <button
           class="clickable-text fa fa-chevron-down"
           type="button"
-        />
+        >
+          <span
+            class="sr-only"
+          >
+            Collapse
+          </span>
+        </button>
       </div>
       <div
         class="container-expandable-heading"
@@ -66,7 +72,13 @@ exports[`<ExpandableContainer/> default props 1`] = `
         <button
           class="clickable-text fa fa-chevron-right"
           type="button"
-        />
+        >
+          <span
+            class="sr-only"
+          >
+            Expand
+          </span>
+        </button>
       </div>
       <div
         class="container-expandable-heading"

packages/components/src/internal/components/buttons/RemoveEntityButton.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
+import { Icon } from '../../Icon';
 
 interface RemoveEntityButtonProps {
     entity?: string;
@@ -29,12 +30,12 @@ export class RemoveEntityButton extends React.Component<RemoveEntityButtonProps,
 
     render() {
         const { entity, index, labelClass, onClick } = this.props;
-
+        const buttonText = entity ? ' Remove ' + entity + ' ' + (index || '') : '';
         return (
             <div className={labelClass}>
-                <button className="clickable-text container--action-button" onClick={onClick} type="button">
-                    <i className="fa fa-times container--removal-icon" />
-                    {entity ? ' Remove ' + entity + ' ' + (index || '') : ''}
+                <button aria-label={entity ? buttonText : 'Remove'} className="clickable-text container--action-button" onClick={onClick} type="button">
+                    <span className="fa fa-times container--removal-icon" aria-hidden="true" />
+                    {buttonText}
                 </button>
             </div>
         );

packages/components/src/internal/components/forms/input/__snapshots__/ColorPickerInput.test.tsx.snap

@@ -22,10 +22,12 @@ exports[`ColorPickerInput allowRemove 1`] = `
       class="color-picker__remove"
     >
       <button
+        aria-label="Remove"
         class="clickable-text container--action-button"
         type="button"
       >
-        <i
+        <span
+          aria-hidden="true"
           class="fa fa-times container--removal-icon"
         />
       </button>

packages/components/src/theme/form.scss

@@ -146,6 +146,10 @@
           border-bottom: 3px solid white
       }
   }
+  &.list-group-item.disabled {
+      background-color: $gray-shadow;
+      color: $text-color-light;
+  }
 }
 
 

packages/components/src/theme/navbar.scss

@@ -446,7 +446,7 @@
 
 .container-nav {
     padding: 10px 0 8px 10px;
-    color: $text-color-gray;
+    color: $text-muted;
     position: relative;
 }
 .container-nav:before {
@@ -470,7 +470,7 @@
 
 .lk-version-nav {
     padding: 8px 0 8px 10px;
-    color: $text-color-gray;
+    color: $text-muted;
     position: relative;
 }
 

packages/components/src/theme/settings.scss

@@ -24,7 +24,7 @@
 .name-id-setting__prefix-example {
     margin-top: 10px;
     margin-left: 48px;
-    color: #999999;
+    color: $text-muted;
 }
 
 .name-id-setting__error {

packages/components/src/theme/utils.scss

@@ -197,3 +197,9 @@
 .pointer {
     cursor: pointer;
 }
+
+/** This is used to get around WAVE false-positives that flag the sr-only text as low contrast **/
+.sr-only {
+    color: black;
+    background: white;
+}

packages/components/src/theme/variables.scss

@@ -26,6 +26,7 @@ $badge-color:         #D43F3A;
 $blue-highlight:       #2980B9;
 $gray-no-highlight:    $gray-lighten;
 $blue-icon-background: #CCE5FF;
+$gray-icon-background: #767676;
 
 $blue-dark:        #1e4f6f;
 $text-color-gray:  #9d9d9d;