Skip to content

Commit

Permalink
- Allow Text to be accessible even if not interactive. (Such as text)…
Browse files Browse the repository at this point in the history
… by using accessibleText property. Do not add tabIndex for these elements.

- Remove the deactivation of accessibility on mouseMove to help users that may also wish to use mouse and keyboard.

- Allow accessibility to turned on on demand via setAccessibilityEnabled() function (Necessary to automatically produce accessible comopnents intead of waiting for a tab key press).
  • Loading branch information
jerwolff committed Nov 25, 2024
1 parent e5cc41d commit ca0a18d
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 8 deletions.
52 changes: 45 additions & 7 deletions src/accessibility/AccessibilitySystem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,8 @@ export class AccessibilitySystem implements System<AccessibilityOptions>
return;
}

if (container.accessible && container.isInteractive())
// Separate check for accessibility without requiring interactivity
if (container.accessible)
{
if (!container._accessibleActive)
{
Expand Down Expand Up @@ -402,7 +403,10 @@ export class AccessibilitySystem implements System<AccessibilityOptions>
if (child.accessibleTitle !== div.title || child.tabIndex !== div.tabIndex)
{
div.title = child.accessibleTitle || '';
div.tabIndex = child.tabIndex;
if (child.interactive)
{
div.tabIndex = child.tabIndex;
}
if (this.debug)
{
this._updateDebugHTML(div);
Expand Down Expand Up @@ -469,8 +473,32 @@ export class AccessibilitySystem implements System<AccessibilityOptions>

if (!div)
{
div = document.createElement('button');

if (container.accessibleType === 'button')
{
div = document.createElement('button');
}
else
{
div = document.createElement(container.accessibleType);
div.style.cssText = `
color: transparent;
pointer-events: none;
padding: 0;
margin: 0;
border: 0;
outline: 0;
background: transparent;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
`;
if (container.accessibleText)
{
div.innerText = container.accessibleText;
}
}
div.style.width = `${DIV_TOUCH_SIZE}px`;
div.style.height = `${DIV_TOUCH_SIZE}px`;
div.style.backgroundColor = this.debug ? 'rgba(255,255,255,0.5)' : 'transparent';
Expand Down Expand Up @@ -537,7 +565,10 @@ export class AccessibilitySystem implements System<AccessibilityOptions>

this._children.push(container);
this._div.appendChild(container._accessibleDiv);
container._accessibleDiv.tabIndex = container.tabIndex;
if (container.interactive)
{
container._accessibleDiv.tabIndex = container.tabIndex;
}
}

/**
Expand Down Expand Up @@ -622,8 +653,6 @@ export class AccessibilitySystem implements System<AccessibilityOptions>
{
return;
}

this._deactivate();
}

/** Destroys the accessibility manager */
Expand All @@ -639,4 +668,13 @@ export class AccessibilitySystem implements System<AccessibilityOptions>
this._children = null;
this._renderer = null;
}

// Add a public method to explicitly enable/disable
public setAccessibilityEnabled(): void
{
this._activate();

return;
this._deactivate();
}
}
13 changes: 12 additions & 1 deletion src/accessibility/accessibilityTarget.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,17 @@ export interface AccessibleOptions
* depending on this type. Defaults to button.
* @default 'button'
*/
accessibleType: string;
accessibleType: keyof HTMLElementTagNameMap;
/**
* Specify the pointer-events the accessible div will use
* Defaults to auto.
* @default 'auto'
* @type {accessibility.PointerEvents}
*/

/** Sets the text content of the shadow div */
accessibleText: string | null;

accessiblePointerEvents: PointerEvents;
/**
* Setting to false will prevent any children inside this container to
Expand Down Expand Up @@ -154,6 +158,13 @@ export const accessibilityTarget: AccessibleTarget = {
*/
accessibleType: 'button',

/**
* Sets the text content of the shadow div
* @member {string}
* @memberof scene.Container#
*/
accessibleText: null,

/**
* Specify the pointer-events the accessible div will use
* Defaults to auto.
Expand Down

0 comments on commit ca0a18d

Please sign in to comment.