Add the description for buttons (#29)

This is for #25 and can be expanded to other renderers.
ziolko · Mar 26, 2022 · 21be2f0 · 21be2f0
1 parent 54f13a6
commit 21be2f0
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/src/AOM/types.ts b/src/AOM/types.ts
@@ -491,6 +491,7 @@ export class RawNodeAttributes {
     @observable "aria-controls"?: HtmlID = undefined;
     @observable "aria-disabled"?: string = undefined;
     @observable "aria-modal"?: string = undefined;
+    @observable "aria-description"?: string = undefined;
     @observable "aria-describedby"?: HtmlID = undefined;
     @observable "aria-haspopup"?: string = undefined;
     @observable "aria-expanded"?: string = undefined;
@@ -838,6 +839,14 @@ export class Aria {
         return this.rawAttributes["aria-controls"]?.trim();
     }
 
+    @computed get ariaDescription() {
+        return this.rawAttributes["aria-description"]?.trim();
+    }
+
+    @computed get ariaDescribedBy() {
+        return this.rawAttributes["aria-describedby"]?.trim();
+    }
+
     @computed get ariaLabel() {
         return this.rawAttributes["aria-label"]?.trim();
     }
@@ -1154,6 +1163,18 @@ export class NodeElement {
         }
     }
 
+    get description(): string {
+        if (this.relations.ariaDescribedBy?.length) {
+            return getAccessibleNameOf(this.relations.ariaDescribedBy).trim();
+        }
+
+        if (this.attributes.ariaDescription?.trim()) {
+            return this.attributes.ariaDescription.trim();
+        }
+
+        return "";
+    }
+
     constructor(node: HTMLElement) {
         this.domNode = node;
         this.htmlTag = node.tagName.toLowerCase();

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -15,6 +15,7 @@ import {getMap, reconcileFields} from "../AOM/reconcile";
 
 class RelationsForId {
     @observable elementsWithId: NonNullable<NodeElement>[] = [];
+    @observable ariaDescriptions: NonNullable<NodeElement>[] = [];
     @observable ariaLabelOf: NonNullable<NodeElement>[] = [];
     @observable ariaControlledBy: NonNullable<NodeElement>[] = [];
     @observable ariaOwnedBy: NonNullable<NodeElement>[] = [];
@@ -298,6 +299,14 @@ export default class Store {
             }
         }
 
+        this.updateSingleReferenceRelation(
+            node,
+            oldAttributes?.ariaDescribedBy,
+            newAttributes?.ariaDescribedBy,
+            "ariaDescribedBy",
+            "ariaDescriptions"
+        );
+
         this.updateSingleReferenceRelation(
             node,
             oldAttributes?.ariaLabelledBy,

diff --git a/src/view/renderers/Button.tsx b/src/view/renderers/Button.tsx
@@ -40,22 +40,29 @@ const SimpleButtonRole = styled.span<{isSelected:boolean}>`
   ${props => props.isSelected && selectedBoxShadow};
 `;
 
-const SimpleButtonContent = styled.span<{ isHovered: boolean }>`
+const SimpleButtonContent = styled.span<{ hasDescription: boolean, isHovered: boolean }>`
   display: inline-block;
   padding: 0 5px;
   background: transparent;
   min-width: 100px;
   cursor: pointer;
+  line-height: 1.33;
 
   border-radius: 0 ${borderRadius} ${borderRadius} 0;
   border: ${props => (props.isHovered ? `1px solid ${color}` : ` 1px dashed #555`)};
 
   :hover {
     background: #555;
   }
+
+  ${props => props.hasDescription && `::after { content: "🛈" }`};
+`;
+
+const SimpleButtonDescription = styled.span<{}>`
 `;
 
 const SimpleButton = observer(function SimpleButton({ node }: ComponentProps) {
+  const description = node.description
   const [isHovered, setHovered] = React.useState(false);
   const [ref, style] = useFocusable(node);
   const roleRef = useRef<HTMLSpanElement>(null);
@@ -80,7 +87,10 @@ const SimpleButton = observer(function SimpleButton({ node }: ComponentProps) {
                         isSelected={node?.isOpenInSidePanel}>
         🖱️
       </SimpleButtonRole>
-      <SimpleButtonContent isHovered={isHovered}>{node.accessibleName}&nbsp;</SimpleButtonContent>
+      <SimpleButtonContent
+        isHovered={isHovered} title={description} hasDescription={!!description && !node.isFocused}>
+        {node.accessibleName}&nbsp;{node.isFocused && description && `- ${description}`}
+      </SimpleButtonContent>
     </SimpleButtonWrapper>
   );
 });