Fixed #465, ARIA roles for output.

wordplaydev · May 19, 2024 · 337684d · 337684d
1 parent e473ced
commit 337684d
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 -   Improved layout of example code output refresh.
 -   Tidier spacing of project preview lists.
 -   [#468](https://github.com/wordplaydev/wordplay/issues/468) Fixed example dragging from tutorial dialog.
+-   [#465](https://github.com/wordplaydev/wordplay/issues/465) Fixed ARIA roles for output.
 
 ### Added
 

diff --git a/src/components/output/GroupView.svelte b/src/components/output/GroupView.svelte
@@ -58,7 +58,7 @@
 </script>
 
 <div
-    role={!group.selectable ? 'presentation' : 'group'}
+    role={!group.selectable ? null : 'group'}
     aria-label={still ? group.getDescription($locales) : null}
     aria-roledescription={group instanceof Group
         ? $locales.get((l) => l.term.group)

diff --git a/src/components/output/OutputView.svelte b/src/components/output/OutputView.svelte
@@ -849,7 +849,6 @@
 <section
     class="output"
     data-uuid="stage"
-    role="application"
     aria-label={$locales.get((l) => l.ui.output.label)}
     class:mini
     class:editing={$evaluation?.playing === false && !painting}
@@ -859,11 +858,11 @@
         $selectedOutput &&
         $selectedOutput.includes(stageValue.value.creator)}
 >
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
         class="value"
         class:ignored
         class:typing
-        role="presentation"
         bind:this={valueView}
         on:keydown={interactive ? handleKeyDown : null}
         on:keyup={interactive ? handleKeyUp : null}

diff --git a/src/components/output/PhraseView.svelte b/src/components/output/PhraseView.svelte
@@ -192,7 +192,7 @@
 
 {#if visible}
     <div
-        role={selectable ? 'button' : 'presentation'}
+        role={selectable ? 'button' : null}
         aria-hidden={empty ? 'true' : null}
         aria-disabled={!selectable}
         aria-label={still ? phrase.getDescription($locales) : null}

diff --git a/src/components/output/ShapeView.svelte b/src/components/output/ShapeView.svelte
@@ -33,7 +33,7 @@
 
 {#if visible}
     <div
-        role={selectable ? 'button' : 'presentation'}
+        role={selectable ? 'button' : null}
         aria-disabled={!selectable}
         aria-label={still ? shape.getDescription($locales) : null}
         aria-roledescription={!selectable

diff --git a/src/components/project/TileView.svelte b/src/components/project/TileView.svelte
@@ -173,8 +173,8 @@
     }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-    role="presentation"
     on:pointermove={handlePointerMove}
     on:pointerleave={() => (resizeDirection = null)}
     on:pointerdown={handlePointerDown}

diff --git a/src/output/Phrase.ts b/src/output/Phrase.ts
@@ -1,4 +1,4 @@
-import type Pose from './Pose';
+import Pose from './Pose';
 import type Value from '@values/Value';
 import type Color from './Color';
 import Fonts, {
@@ -361,7 +361,9 @@ export default class Phrase extends Output {
                 this.name instanceof TextLang ? this.name.text : undefined,
                 this.size,
                 this.face,
-                this.pose.getDescription(locales),
+                this.resting instanceof Pose
+                    ? this.resting.getDescription(locales)
+                    : this.pose.getDescription(locales),
             ).toText();
         }
         return this._description;