Code Monkey home page Code Monkey logo

accname's Introduction

accname

A TypeScript library for calculating the accessible name of HTMLElements.

Usage

To install accname with NPM, run:

$ npm install accname

Once installed, import and use accname as follows:

import {getAccessibleName} from 'accname';

const elem = document.getElementById('target');
const name = getAccessibleName(elem);

Disclaimer

This is not an officially supported Google product.

accname's People

Contributors

alexlloyd0 avatar dependabot[bot] avatar engelsdamien avatar lauraharker avatar oisinnolan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

accname's Issues

Inline & Block-level should affect whitespace

See #32

Elements that are inline should be handled differently to those that are block-level in step 2F. More specifically, block-level Elements should be concatenated to the accumulated text in a space-separated manner by rule 2F, inline Elements should be concatenated without spaces.

The same applies for CSS pseudo-elements that are block-level or inline.

Title attribute ignored on elements

data:text/html,<button title="accname"></button>

Firefox and Chrome both give an accname of accname but we give "". Presumably some rule before 2I is returning "" rather than null

Non-textual CSS pseudo-element content included in name

See #32

  • accname is adding CSS pseudo-element content to the accessible name even when the content is non-textual. This has materialised on multiple occasions as url(...). Rule 2F should take some measure to ensure that such content is textual.

Does not recognize text in shadow DOM

Thank you for writing this library! I may have found an issue, though, with shadow DOM support.

For an element containing a shadow root, e.g.:

<button>
  <x-component>
    #shadow-root
      hello world
  </x-component>
</button>

In this example, the accessible name contains "hello world". But accname does not recognize this text, instead returning an empty string. Here is a minimal repro.
Screen Shot 2022-03-28 at 4 44 57 PM

Figure out how to run tests on pull requests

We should make sure that we can run all the unit tests when mergin a PR to avoid accidentally breaking things.

Ideally we can figure out how to run them on different browsers too.

Title shouldn't be inherited

See #32

  • Step 2I states specifically 'Otherwise, if the current node has a Tooltip attribute, return its value.'
  • Elements inheriting a title value do not themselves have a title attribute.
  • Removing title inheritance from 2I will cause accname to behave more similarly to existing implementations.

Explicit comboboxes not handled

See #32

Elements marked explicitly as comboboxes (role=”combobox”) are not currently included in accessible names produced by accname's algorithm.

Definition for Hidden

See #32

  • Narrowing the definition for hidden in step 2A would improve parity with other implementations.

Output string not formatted

See #32

  • accname should return a flat string as defined here.
  • accname should also format the output string such that it has no leading or trailing whitespace.

Automatic Measurement of Output Accuracy

  • It would be great to have a measure for accname's accuracy calculated every time a PR is made.
  • This could be done automatically with GitHub actions.
  • The metrics could be Web Platform Tests as well as some field-test on real world HTML documents. We could write some scripts that run experiments and output results, which we can then display in a comment on the PR automatically.
  • It may also be possible to compare performance with master to get a performance diff for each PR.

See, for example: https://github.com/marketplace/actions/comment-on-pr

Validation: unclear error if `ac` element missing

If no element has the ac attribute, the error shown in the UI is

Error: Protocol error (DOM.describeNode): Could not find node with given id

I think this will be the most common user error (I've made it at least twice!) so a more friendly error message would be useful

Update 2F Spec Assumptions

  • Step 2F has 2 spec assumptions relating to whitespace, although these assumptions have been clarified thanks to the Web Platform Tests (see http://wpt.live/accname/name_file-label-inline-block-elements-manual.html) and this issue: w3c/accname#16 by Bryan Garaventa.
  • The spec assumptions for 2F should be updated in accordance with our current approach to whitespace, namely that we now consider whether an element is 'inline' or 'block', and also that we consider the 'display' value for CSS pseudo elements.

<label for="foo"> isn't followed on IE

17/116 unit tests currently fail on Internet Explorer.

e.g.

  fit('understands label for', () => {
    render(
        html`
    <button id="foo">text</button>
    <label for="foo">bar</label>`,
        container);
    const elem = document.getElementById('foo');
    expect(computeTextAlternative(elem!)).toBe('bar');
  });

This passes on chrome and firefox but IE gives elem an accessible name of text.

Node re-visiting in AccName

Problem

  • AccName fails a small set of WPTs of the form seen in http://wpt.live/accname/name_test_case_659-manual.html.
  • If AccName were to pass these tests, its WPT performance should be 100%.
  • I think the problem here is that accname is visiting the same target <input /> Node twice here, adding it to the list of context.visitedNodes only when it traverses this <input /> for the second time.
  • The spec is in large part responsible for this issue, specifying only in step 2F that Each node in the subtree is consulted only once.. In fact it would appear that no node should ever be visited more than once during accessible name computation, in which case the spec should be re-worded to reflect this.

A Potential Solution

  • This could be implemented by keeping track of any node that is passed to computeTextAlternative() and ensuring that a node is only processed if it has never been seen before.
  • This would probably also be a good opportunity to merge context.inherited.visitedNodes and context.inherited.nodesUsed.

Name from content without descendants

See #32

The empty string is being returned by step 2F in cases when an Element that allows name from content has no descendants. Instead, other steps (such as 2I) should be considered. For example:

<input type="checkbox" title="foo">

<input> should have an accessible name of ”foo” here, but accname is returning ””.

This issue is also referenced in #19

Need more accurate Role computation

  • A function that can accurately compute the role for an element would be very useful in rule 2F.
  • This would greatly cut down on the amount of code needed to implement 2F as well as improving readability.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.