The focusable attribute in SVG is malfunctioning

I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document.

My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr)

However, I am facing difficulty accomplishing this. I have set the focusable attribute to true, and set the tabindex of each element to 0.

Below is a snippet of my code:

<div style="border: solid yellow 2px;" tabindex="0">
<svg tabindex="0" width="900px" height="500px" viewBox="0 0 95 50" style="border: solid red 1px;" focusable="true"
     xmlns="http://www.w3.org/2000/svg">
    <g data-Name="group" tabindex="0" stroke="green" fill="white" stroke-width="5" data-tabindex="0" style="border: solid green 1px;" focusable="true">
        <circle tabindex="0" cx="20" cy="25" r="5" focusable="true" data-Name="shape 1"  data-tabindex="0" />
        <circle tabindex="0" cx="40" cy="25" r="5" focusable="true" data-Name="shape 2"  data-tabindex="0" />
        <circle tabindex="0" cx="60" cy="25" r="5" focusable="true" data-Name="shape 3" data-tabindex="0" />
        <circle tabindex="0" cx="80" cy="25" r="5" focusable="true" data-Name="shape 4" data-tabindex="0" />
    </g>
</svg>

I have tested this code in Google Chrome. Is there another approach to achieve my objective?

javascriptjqueryhtmlsvg

Answer №1

Robert Longson pointed out in the comments that SVG 1.2 was never officially released and web browsers do not support SVG 1.2 Tiny. The upcoming SVG 2 will introduce a tabIndex attribute similar to HTML, but its implementation is still pending in many browsers such as Chrome, IE, and Firefox (which currently respect tabIndex on SVG elements within HTML).

For now, most browsers allow <a> link elements in SVG to receive keyboard focus if they have an xlink:href attribute (even for no-op links like #). While you can't control tab order or manage focus through scripts, users can navigate through elements and interact with the linked content.

The code snippet below demonstrates how the styling of circles changes when the containing link gains user focus.

svg {
  max-height: 100vh;
  max-width: 100vw;
}

a:focus {
  fill: blue;
  fill-opacity: 0.5;
  outline: none;
}
<svg width="900px" height="500px" viewBox="0 0 95 50" style="border: solid red 1px;"
     xmlns="http://www.w3.org/2000/svg">
    <g data-Name="group" stroke="green" fill="white" stroke-width="5" data-tabindex="0" >
      <a xlink:href="#">
        <circle cx="20" cy="25" r="5" data-Name="shape 1"  data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="40" cy="25" r="5" data-Name="shape 2"  data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" />
      </a>
      <a xlink:href="#">
        <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" />
      </a>
    </g>
</svg>

Answer №2


For a while now, I've been on the hunt for a way to navigate inside SVG elements. My goal is to move from one SVG element to another seamlessly. After much searching, I stumbled upon this fantastic library: https://github.com/flesler/jquery.scrollTo/releases. The following code demonstrates how to navigate from a yellow circle to a red one:

<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="./js/jquery.localScroll.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings actually belong to jQuery.ScrollTo. Check out its demo for examples of each option.
* @see http://demos.flesler.com/jquery/scrollTo/
* You can use EVERY single setting of jQuery.ScrollTo in the settings hash you send to jQuery.localScroll.
*/

// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any defaults like this
$.localScroll.defaults.axis = 'xy';

$.localScroll({
//target: '#content', // could be a selector or a jQuery object too.
queue:true,
duration:1000,
hash:true,
lazy:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object and can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});

$('#nodeX').click(function() {
$('html, body').scrollTo(document.getElementById('node1'), 1000);
});
});

</script>
</head>
<body>

<svg id="panel" width="3249pt" height="2200pt" viewBox="0.00 0.00 3249.00 2200.00" >

<g id="nodeX">
 <a xlink:href="#node1">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </a>
 </g>

 <g id="node1">
 <circle cx="1880" cy="1580" r="40" stroke="green" stroke-width="4" fill="red" />
 </g>
 
</svg>

</body>

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

PHP script for conducting sensitivity analysis

I am working with a PHP application that calculates a final result based on user input in multiple forms. Imagine a scenario where a user enters a value of 5 on the first page, which is passed through _POST to the next page. Then, they enter a value of 2 ...

phpjqueryajax

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Currently, I am utilizing puppeteer to fetch certain elements from a webpage, specifically class items (divs). Although I understand that getElementsByClassName returns a list that needs to be looped through, the function always returns undefined for me, e ...

javascripthtmlnode.jstypescriptpuppeteer

Utilize the directive method within the transcluded content by making a call

Trying to call a method within a directive from transcluded content. The structure of my HTML is: <typeahead class="typeahead" model="customers" filtered-model="customersfiltered" ng-model="selectedcustomer"> <ul> <li ng-click="select ...

javascriptangularjs

How to dynamically update data in Angular without the need for a page refresh or loading?

Looking to enhance a wishlist feature by enabling users to delete items from the list without the need for a page refresh. Here's my approach: wish.controller('wishCtrl',['$scope','$http','$cookies','$wind ...

javascriptangularjsajax

Looking for a different option than JSON.stringify()? Check out JSON2.js for

Currently, I am attempting to initiate a WCF call to a function that requires one String parameter. To pass these parameters from jQuery, I utilize JSON.stringify(parameters), which consists of a name:value collection with the specified parameters. My con ...

jqueryjsonstringify

What methods can I use to compare a React Component across multiple pages with Cypress?

One task I am trying to tackle is comparing a component on one page with the same component on another page using Cypress. For example, let's say I have a Pricing Component on the Home page, and I want to verify if the values on the Pricing Page are i ...

javascriptreactjsnext.jscypress

What causes the error message "ng-model is undefined"?

Within my form, there are three angular-ui-bootstrap typehead elements <form> <div class="form-group"> <label for="fieldname" class="col-md-3 control-label">Name</label> <div class="col-md-6"> <input type="text ...

javascriptangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

Would you say the time complexity of this function is O(N) or O(N^2)?

I am currently analyzing the time complexity of a particular function. This function takes a string as input, reverses the order of words in the string, and then reverses the order of letters within each word. For example: “the sky is blue” => “eu ...

javascriptstringbig-o

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...

htmlcss

Convert individual packages within the node_modules directory to ES5 syntax

I am currently working on an Angular 12 project that needs to be compatible with Internet Explorer. Some of the dependencies in my node_modules folder are non es5. As far as I know, tsc does not affect node_modules and starts evaluating from the main opti ...

javascriptangulartypescriptbabeljsecmascript-5

substitute tags

Is there a way to change the tagName of a tag using jQuery? For example, if I have an HTML document and I want to replace all 'fieldset' with 'div'. Any suggestions would be appreciated! ...

jqueryhtmldomtagsreplace

Choose a selection in ExtJS by finding matching attributes

Is there a convenient method to choose an item in an Ext.tree.Panel by matching it with an item based on the same attribute in an Ext.grid.Panel? For example, using something like: tree_dir.getSelectionModel().select(grid_file.getSelectionModel().getSelect ...

javascriptextjsextjs4

Guide on creating a project for developing an npm package

Within my git root project, I am utilizing a git subproject called UIComponents. For instance, my main project is named MyApp and the subproject is UIComponents. Currently, I have cloned the UIComponents repository inside my project folder and added UIComp ...

javascriptnode.jsnpmyarnpkg

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Conceal the content within the body and reveal a uniquely crafted div element using Print CSS

I came across numerous resources on using CSS to hide specific parts of a webpage. However, I am not looking to hide multiple divs like this: #flash,#menu,#anuncios { display:none; } Instead, my goal is to hide the entire body of the page and only displ ...

htmlcss

Steps to solve React error message: "Warning: Every child in a list should have a distinct 'key' prop"

Currently, I am developing a React application that fetches movies and allows users to comment on them while also providing the option to vote/rate. Users can both comment and rate the movie they are viewing. Here is an excerpt from my code: <FormGrou ...

javascriptreactjs

Using Angular, you can incorporate a dynamic href inside interpolation by using

Looking for a way to include a redirecting link within the response of string interpolation. I am incorporating the API response value into the interpolation binding. For instance, if my response is, "This site is not working. please contact google f ...

htmlangular

Enhance user experience by implementing a feature in AngularJS that highlights anchor

As I am in the process of developing a chat application using Angular, I have encountered an issue with switching between views. One view, named 'chat.html', displays the list of available users while another view, 'chatMessages.html', ...

javascripthtmlangularjs

Activating Ionic6 Stack Modal through JavaScript or TypeScript

Is it possible to trigger the modal using script code instead of a button? I have searched through various examples in the tutorial, but all of them rely on the modal trigger mechanism. <ion-button id="open-modal" expand="block">O ...

javascripttypescriptionic-frameworkmodal-dialogionic6

Having trouble running tests on the Express.js server

I'm struggling to run basic tests on my expressjs server and close it immediately. I have exported the server as a promise, but can't seem to figure out how to achieve this. Below is the code for my server file : index.js const config = require( ...

javascriptnode.jsexpressmocha.js