Enhancing the user experience of the dropdown component through improved

I have developed an accessibility feature for a dropdown component that dynamically populates values in the options menu only when the dropdown is opened. This means that it compiles the template on the fly and attaches it to the dropdown box.

Dropdown HTML: 

<div id="dropdown" ng-click="openDropdown()">
   <div id="selectedValue"  role="listbox"  tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div>
</div>

DropDown Menu template(which gets compiled and populated after clicking the dropdown above) :

<div id="dropDownMenu">
  <li ng-click="selectItem()" role="option">item1</li>
  <li ng-click="selectItem()" role="option">item2</li>
</div>

I am encountering two problems:

  1. Since my #dropdownMenu is generated on click of #dropdown (dynamic template generation), JAWS does not have access to #dropdownMenu when focus comes to #selectedValue, therefore it doesn't announce the number of options etc as in the case of a typical select box.

  2. I am using aria-label="{{selectedVal}}" for #selectedValue so that on arrow key clicks JavaScript updates selectedVal even though #dropdownMenu is not open. However, the changed value of selectedVal is not announced by JAWS 16.0, it only announces it the first time the user tabs into it. It should be noted that this works fine in JAWS 14.0.

I am looking forward to some solutions...

javascriptangularjsaccessibilitywai-ariajaws-screen-reader

Answer №1

  1. Try adding aria-live=polite to resolve the issue.
  2. Have you considered using a standard select box and dynamically populating the option elements? This would eliminate the need to manually update an aria property with the current selection, as screenreaders are able to navigate through options automatically. Additionally, ensure that the aria-label reflects the purpose of the select box, not just the selected option. By utilizing HTML select with options, you can also remove tabindex and aria-live since native form inputs have built-in keyboard and screenreader support.

Answer №2

It is important to wait for the element to appear in the DOM before setting focus to the first submenu item using the native function .focus(). This ensures that the action will be successful.

However, it's crucial to consider the user's experience. If there is a delay in loading and the user has moved on to other tasks, avoid forcing their focus back to the dropdown menu as it may cause annoyance.

Instead of using tabindex=0 for interactive elements (such as those with ng-click), opt for using native HTML elements like <a> or <button>. This guarantees that the elements are not only keyboard accessible but also visually appealing, responding to all standard keyboard inputs that users expect without manual implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

increasing the `WeakSet` size while simultaneously causing a memory overload

There's something strange I observed. Despite using a WeakSet which should not retain any references, the code below still manages to exhaust memory: 'use strict'; require('babel-polyfill'); const s = new WeakSet(); for (let i = ...

javascriptnode.jsecmascript-6babeljs

Encountering Issues with Yeoman Installation

As a newcomer to Ubuntu and Angular, I am in the process of setting up a Yeoman framework. However, whenever I try to run the "yo" command, I encounter the following errors: Error: EACCES, mkdir '/home/diarmuid/tmp/npm-2997-20XPEB7W' npm ERR! ...

angularjsyeoman

Transfer the array using Ajax to a PHP script

I have an array generated using the .push function that contains a large amount of data. What is the most effective way to send this data to a PHP script? dataString = ??? ; // Is it an array? $.ajax({ type: "POST", url: "script.php" ...

phpjavascriptjqueryajax

Getting the ID name from a select tag with JavaScript - A quick guide!

Can you help me retrieve the id name using JavaScript when a selection is made in a select tag? I have tried running this code, but it only alerts undefined. For instance, if I select bbb in the select tag, I should be alerted with 2 Any suggestions on ...

javascripthtml

Modify the colors of <a> elements with JavaScript

I am brand new to the world of UI design. I am encountering an issue with a static HTML page. (Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code) What I would like to achie ...

javascripthtmlcss

Solving the challenge of handling multiple text inputs in Laravel Blade using Vue.js v-model within a @

Hello, I am encountering an issue with my Laravel application that displays posts and comments. The problem lies with the Vue v-model in the input text when using the @foreach directive in Blade. Each post is showing the comments input box, but when I ente ...

javascriptphplaravelvue.js

Display an image when the cursor hovers over a text

I'm attempting to display an image when hovering over specific text. The image should not replace the text, but appear in a different location. The concept is as follows: When hovering over the word "Google", the Google logo should appear in the red ...

javascripthtmlcss

Adding the same block of code to an event in Node.js: Best practices

My preferred tech stack for real-time user synchronization includes Node.Js with Express and Express HBS (Handlebars), as well as Socket.IO. For example, when creating a web chat application, I emit an event from the client to the server each time a user ...

javascriptnode.jsexpresstemplateshandlebars.js

What's the best way to adjust the width of the <Input> component in Reactstrap?

How can I adjust the width of an input element in Reactstrap to be smaller? I've attempted to set the bsSize to small without success <InputGroup> <Input type="text" name="searchTxt" value={props.searchText ...

javascriptreactjsreactstrap

The proper way to close file descriptors on a terminated HTTP connection in a Node.js environment

I am currently experimenting with Node.js, where I am attempting to stream files from the filesystem over HTTP. However, my experience on an OS X Lion machine has been hindered by a buggy Apache Bench (ab) app that prematurely aborts connections. This issu ...

javascripthttpnode.js

Is there a way to implement infinite scrolling in my MUI DataGrid component?

Hey there! I have a custom component that needs to have infinite scrolling added to it. I tried looking into MUI DataGrid for solutions, but didn't have much luck implementing anything successfully. Currently, I'm fetching data using GraphQL and ...

javascriptreactjsmaterial-ui

Having issues with the functionality of Bootstrap 4 popover?

In my Spring MVC web project, a Bootstrap popover appears when the help icon is clicked. However, on the first click, the popover opens and moves away from the icon. After closing it and clicking again, the popover correctly positions itself. When I chan ...

javascriptcssspringbootstrap-4jstl

Getting the value of a CSS variable under <script> in Vue.js

I am working on implementing a Doughnut chart using chartJs in my application. However, I want to set the color of the chart within the <script> tag and retrieve the color from theme/variables.css. In the current code snippet below, there is a hardc ...

javascriptcssvue.jsvuejs3

What steps can I take to minify my code using react-create-app?

Currently, I am facing an issue with minifying my code on the server. Despite running npm run build, which is supposed to handle all the minifying processes (as shown here: https://i.stack.imgur.com/wjpd7.png), I still see the unminified code when accessin ...

javascriptreactjscreate-react-appminify

There seems to be a problem with the Chart property getter as it

I'm in the process of creating an object that corresponds to chartJS's line-chart model <line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"></line-chart> There is an API I utilize which returns a standard arra ...

javascriptchartsvue.js

"Proceeding without waiting for resolution from a Promise's `.then`

I am currently integrating Google Identity Services for login on my website. I am facing an issue where the .then function is being executed before the Promise returned by the async function is resolved. I have temporarily used setTimeout to manage this, b ...

javascripthtmlreactjsmerngoogle-identity-toolkit

Show a Pop-Up When a Key is Pressed

My website popup features a 'Close' button in the top right corner, a text section with a background image, and a 'Print' button at the bottom. The popup automatically appears when the page loads. However, once closed, there is currentl ...

javascriptjqueryhtmlcsskeyboard-events

Using the react-router Navigate component within a Next.js application allows for seamless

Is there a way to achieve the same result as the Navigate component in react-router within Nextjs? The next/Router option is available, but I am looking for a way to navigate by returning a component instead. I need to redirect the page without using rout ...

javascriptreactjsnext.js

Refresh the list once modal is closed

I am working with a list of different brands: <div class="brand-list"> <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-control ...

angularjstwitter-bootstrapangular-ui-bootstrap

Exploring ways to connect my React application with a node backend on the local network?

On my MacBook, I developed a react app that I access at http://localhost:3000. In addition, I have a nodejs express mysql server running on http://localhost:5000. The issue arises when I try to open the IP address with port 3000 in the browser of my Window ...

javascriptnode.jsreactjsnetworking