Merge pull request #564 from SolidOS/profileEditA11y

Work towards accessibility

Author: bourgeoa

jest.config.mjs

@@ -11,6 +11,12 @@ export default {
     '^.+\\.[tj]sx?$': ['babel-jest', { configFile: './babel.config.mjs' }],
   },
   transformIgnorePatterns: ['/node_modules/(?!lit-html).+\\.js'],
+  moduleNameMapper: {
+    '^SolidLogic$': 'solid-logic',
+    '^UI$': 'solid-ui',
+    '^\\$rdf$': 'rdflib',
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.js'
+  },
   setupFilesAfterEnv: ['./test/helpers/setup.ts'],
   testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
   roots: ['<rootDir>/src', '<rootDir>/test'],

package-lock.json

@@ -14,11 +14,10 @@
   ],
   "scripts": {
     "clean": "rm -rf dist src/versionInfo.ts",
-    "build": "npm run clean && npm run build-version && npm run typecheck && npm run build-dist && npm run postbuild-js",
+    "build": "npm run clean && npm run build-version && npm run typecheck && npm run build-dist && npm run build-js && npm run postbuild-js",
     "build-version": "bash timestamp.sh > src/versionInfo.ts && ./node_modules/.bin/eslint 'src/versionInfo.ts' --fix",
-    "build-dist": "npm run build-js && npm run build-types",
-    "build-js": "babel src --out-dir dist --extensions '.ts,.js' --source-maps",
-    "build-types": "tsc --emitDeclarationOnly",
+    "build-dist": "webpack --progress",
+    "build-js": "babel src --out-dir dist --extensions '.ts,.js' && tsc --emitDeclarationOnly",
     "postbuild-js": "rm -f dist/versionInfo.d.ts dist/versionInfo.d.ts.map",
     "lint": "eslint",
     "lint-fix": "eslint --fix",
@@ -71,6 +70,7 @@
     "pane-registry": "^3.0.1",
     "profile-pane": "^3.1.2",
     "solid-namespace": "^0.5.4",
+    "solid-ui": "^3.0.4",
     "source-pane": "^3.0.1"
   },
   "overrides": {
@@ -93,6 +93,7 @@
     "babel-loader": "^10.0.0",
     "babel-plugin-inline-import": "^3.0.0",
     "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.4",
     "eslint": "^9.39.3",
     "globals": "^17.3.0",
@@ -108,8 +109,8 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "solid-logic": "^4.0.3",
-    "solid-ui": "^3.0.4",
     "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.16",
     "ts-jest": "^29.4.6",
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",

package.json

@@ -0,0 +1,80 @@
+/* Styles extracted from manager.js */
+
+.obj {
+  margin: 0.2em;
+  border: none;
+  padding: 0;
+  vertical-align: top;
+}
+
+.pred, .pred.internal {
+  /* Add any specific styles for predicate TDs here */
+}
+
+.iconTD {
+  margin: 0.2em;
+  border: none;
+  padding: 0;
+  vertical-align: top;
+  width: 0px;
+}
+
+.labelTD {
+  width: 100%;
+}
+
+.paneIconTray {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.paneShown {
+  width: 24px;
+  border-radius: 0.5em;
+  border-top: solid #222 1px;
+  border-left: solid #222 0.1em;
+  border-bottom: solid #eee 0.1em;
+  border-right: solid #eee 0.1em;
+  margin-left: 1em;
+  padding: 3px;
+  background-color: #ffd;
+}
+
+.paneHidden {
+  width: 24px;
+  border-radius: 0.5em;
+  margin-left: 1em;
+  padding: 3px;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.strongHeader {
+  font-size: 150%;
+  margin: 0 0.6em 0 0;
+  padding: 0.1em 0.4em;
+}
+
+.tableFullWidth {
+  width: 100%;
+}
+
+.placeholderTable {
+  width: 100%;
+}
+
+.tdFlex {
+  margin: 0.2em;
+  border: none;
+  padding: 0;
+  vertical-align: top;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}

src/outline/manager.css

@@ -3,6 +3,7 @@
    Outline Mode Manager
 */
 import * as paneRegistry from 'pane-registry'
+import './manager.css'
 import * as $rdf from 'rdflib'
 import * as UI from 'solid-ui'
 import { authn, authSession, store } from 'solid-logic'
@@ -170,11 +171,12 @@ export default function (context) {
     statement
   ) {
     const td = dom.createElement('td')
-    td.setAttribute(
-      'style',
-      'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
-    )
+    td.classList.add('obj')
     td.setAttribute('notSelectable', 'false')
+    td.style.margin = '0.2em'
+    td.style.border = 'none'
+    td.style.padding = '0'
+    td.style.verticalAlign = 'top'
     const theClass = 'obj'
 
     // set about and put 'expand' icon
@@ -198,7 +200,6 @@ export default function (context) {
       ).addEventListener('click', expandMouseDownListener)
     }
     td.setAttribute('class', theClass) // this is how you find an object
-    // @@ TAKE CSS OUT OF STYLE SHEET
     if (kb.whether(obj, UI.ns.rdf('type'), UI.ns.link('Request'))) {
       td.className = 'undetermined'
     } // @@? why-timbl
@@ -249,10 +250,7 @@ export default function (context) {
     // if (kb.statementsMatching(predicate,rdf('type'), UI.ns.link('Request')).length) predicateTD.className='undetermined';
 
     const labelTD = dom.createElement('TD')
-    labelTD.setAttribute(
-      'style',
-      'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
-    )
+    labelTD.classList.add('labelTD')
     labelTD.setAttribute('notSelectable', 'true')
     labelTD.appendChild(dom.createTextNode(lab))
     predicateTD.appendChild(labelTD)
@@ -345,7 +343,7 @@ export default function (context) {
     const me = authn.currentUser()
     if (!me) return []
     const div = dom.createElement('div')
-    const [books, pods] = await Promise.all([getAddressBooks(), getPods()])
+    const [pods] = await Promise.all([getPods()])
     return [
       {
         paneName: 'home',
@@ -368,7 +366,6 @@ export default function (context) {
         icon: UI.icons.iconBase + 'noun_492246.svg'
       }
     ]
-      .concat(books)
       .concat(pods)
 
     async function getPods () {
@@ -808,7 +805,7 @@ export default function (context) {
     const table = d.parentNode
     const par = table.parentNode
     const placeholder = dom.createElement('table')
-    placeholder.setAttribute('style', 'width: 100%;')
+    placeholder.classList.add('placeholderTable')
     par.replaceChild(placeholder, table)
     table.removeChild(d)
     par.replaceChild(table, placeholder) // Attempt to
@@ -827,7 +824,7 @@ export default function (context) {
     if (!table) {
       // Create a new property table
       table = dom.createElement('table')
-      table.setAttribute('style', 'width: 100%;')
+      table.classList.add('tableFullWidth')
       expandedHeaderTR(subject, pane, options).then(tr1 => {
         table.appendChild(tr1)
 
@@ -2365,7 +2362,7 @@ export default function (context) {
     } else if (obj.termType === 'Collection') {
       // obj.elements is an array of the elements in the collection
       rep = dom.createElement('table')
-      rep.setAttribute('style', 'width: 100%;')
+      rep.classList.add('tableFullWidth')
       rep.setAttribute('about', obj.toNT())
       /* Not sure which looks best -- with or without. I think without
 
@@ -2377,10 +2374,7 @@ export default function (context) {
         const elt = obj.elements[i]
         const row = rep.appendChild(dom.createElement('tr'))
         const numcell = row.appendChild(dom.createElement('td'))
-        numcell.setAttribute(
-          'style',
-          'margin: 0.2em; border: none; padding: 0; vertical-align: top;'
-        )
+        numcell.classList.add('obj')
         numcell.setAttribute('notSelectable', 'false')
         numcell.setAttribute('about', obj.toNT())
         numcell.innerHTML = i + 1 + ')'

src/outline/manager.js

@@ -0,0 +1 @@
+module.exports = {}

test/__mocks__/styleMock.js

@@ -0,0 +1,124 @@
+import path from 'path'
+import TerserPlugin from 'terser-webpack-plugin'
+import CopyPlugin from 'copy-webpack-plugin'
+
+const common = {
+  entry: './src/index.ts',
+  resolve: {
+    extensions: ['.ts', '.js', '.json'],
+    fallback: {
+      path: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.ttl$/i,
+        type: 'asset/source'
+      }
+    ],
+  },
+  externals: {
+    fs: 'null',
+    'node-fetch': 'fetch',
+    'isomorphic-fetch': 'fetch',
+    'text-encoding': 'TextEncoder',
+    '@trust/webcrypto': 'crypto',
+    rdflib: 'rdflib',
+    $rdf: 'rdflib',
+    'solid-logic': 'SolidLogic',
+    SolidLogic: 'SolidLogic',
+    'solid-ui': 'UI',
+    UI: 'UI',
+  },
+  devtool: 'source-map',
+}
+
+const normalConfig = {
+  ...common,
+  mode: 'production',
+  output: {
+    path: path.resolve(process.cwd(), 'dist'),
+    filename: 'solid-panes.js',
+    library: {
+      type: 'umd',
+      name: 'SolidPanes',
+      export: 'default',
+    },
+    globalObject: 'this',
+    clean: true,
+  },
+  plugins: [
+    ...(common.plugins || []),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'src/**/*.css',
+          to: ({ context, absoluteFilename }) => {
+            // Preserve folder structure under dist/
+            const relPath = path.relative(path.resolve('src'), absoluteFilename)
+            return path.resolve('dist', relPath)
+          },
+        },
+      ],
+    }),
+  ],
+  optimization: {
+    minimize: false,
+  }
+}
+
+const minConfig = {
+  ...common,
+  mode: 'production',
+  output: {
+    path: path.resolve(process.cwd(), 'dist'),
+    filename: 'solid-panes.min.js',
+    library: {
+      type: 'umd',
+      name: 'SolidPanes',
+      export: 'default',
+    },
+    globalObject: 'this',
+    clean: false,
+  },
+  plugins: [
+    ...(common.plugins || []),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'src/**/*.css',
+          to: ({ context, absoluteFilename }) => {
+            // Preserve folder structure under dist/
+            const relPath = path.relative(path.resolve('src'), absoluteFilename)
+            return path.resolve('dist', relPath)
+          },
+        },
+      ],
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      })
+    ],
+  }
+}
+
+export default [normalConfig, minConfig]