Add content to table header for screen readers

Author: robertbrignull

extensions/ql-vscode/src/view/common/ScreenReaderOnly.tsx

@@ -0,0 +1,13 @@
+import { styled } from "styled-components";
+
+/**
+ * An element that will be hidden from sighted users, but visible to screen readers.
+ */
+export const ScreenReaderOnly = styled.div`
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`;

extensions/ql-vscode/src/view/model-editor/ModeledMethodDataGrid.tsx

@@ -12,6 +12,7 @@ import { sortMethods } from "../../model-editor/shared/sorting";
 import { InProgressMethods } from "../../model-editor/shared/in-progress-methods";
 import { HiddenMethodsRow } from "./HiddenMethodsRow";
 import { ModelEditorViewState } from "../../model-editor/shared/view-state";
+import { ScreenReaderOnly } from "../common/ScreenReaderOnly";
 
 export const SINGLE_MODEL_GRID_TEMPLATE_COLUMNS =
   "0.5fr 0.125fr 0.125fr 0.125fr 0.125fr";
@@ -92,7 +93,9 @@ export const ModeledMethodDataGrid = ({
               Kind
             </VSCodeDataGridCell>
             {viewState.showMultipleModels && (
-              <VSCodeDataGridCell cellType="columnheader" gridColumn={6} />
+              <VSCodeDataGridCell cellType="columnheader" gridColumn={6}>
+                <ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
+              </VSCodeDataGridCell>
             )}
           </VSCodeDataGridRow>
           {methodsWithModelability.map(({ method, methodCanBeModeled }) => {